I am creating a webpage and the css and html are fairly straightforward. However, in Chrome, and only on 100% zoom, when I hover over a navbar item a tiny sliver of the container div color stays the same. If I change the zoom level or use another browser this effect is not present. Any thoughts: Code is below.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Site Title</title>
</head>
<body>
<div class="img_div" id="visible_div1">
<img src="images/logo_transparent.png" class="logo_img" id="img1"/>
</div>
<div class="nav_bar_div" id="visible_div2">
<ul class="nav_bar" id="ul1">
<li>Home</li>
<li>Services</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class="main_div" id="visible_div3">
</div>
</body>
<footer>
Footer Text
</footer>
CSS:
body{
background-color: #5d5953;
font: arial;
color: white;
}
.img_div{
position: relative;
margin: auto;
height: 10%;
overflow: hidden;
background: white;
width: 60%;
}
.logo_img{
top: 10%;
float: right;
height: 80%;
padding: 0 2% 0 2%;
position: relative;
}
.nav_bar_div{
width: 60%;
background: #ff9900;
margin: auto;
padding: 0;
}
.nav_bar{
list-style-type: none;
margin: auto;
overflow: hidden;
}
.nav_bar > li{
display: inline-block;
margin: 0;
padding: 1%;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.nav_bar > li:hover{
background-color: white;
}
.nav_bar > li > a{
display: block;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
font-size: 2em;
margin: 0;
}
.nav_bar > li:hover a{
color: #ff9900;
}
.main_div{
background-color: white;
color: black;
width: 60%;
height: 85%;
margin: auto;
background-image: url("images/welcome_image.jpg");
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
footer{
background-color: #ff9900;
font-family: arial;
width: 60%;
margin: auto;
text-align: center;
padding: 0.5% 0 0.5% 0;
}
Example (Chrome):
NavBar Issue In Chrome
Example (IE):
NavBar Correct In IE
Related
So here's the HTML code for my website about a holiday destination (New York). I've so far made a nav bar and implemented parallax scrolling with two background images. I then saw when running the code that there was a white space after the nav bar and the first background image and I'm not sure how to solve this. I've tried changing the padding and margins around but that's not working :( Some help would be greatly appreciated!
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 50px;
}
header{
background:plum;
position: relative;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 100px;;
height: 60px;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 70px;
padding-top: 20px;
font-size: 18px;
position: relative;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 3px;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-top: 4%;
margin-bottom: auto;
display: block;
}
.transbox p{
margin: 5%;
font-weight: bold;
color: black;
}
h1{
text-align: center;
font-size: 65px;
}
.first-block{
height: 100px;
background-color:rgb(109, 176, 243);
text-align: center;
border: 10px double white;
padding-bottom: 60px;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 50px;
text-align: center;
color: rgb(13, 97, 170);
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>New York</title>
<link rel="stylesheet" href="main.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap"
rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two"></div>
</body>
</html>
I'm not fully understand what is white space you mean, but try to delete margin-top: 4% in
.transbox{
padding: 10px;
width: 30%;
background-color: white;
border: 10px double black;
opacity: 0.6;
margin-left: 50px;
margin-right: auto;
margin-bottom: auto;
display: block;
}
Despite having position fixed and no transform properties, my "hero" div always moves with the page. I want it to stay put
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css:
*
{
margin: 0;
padding: 0;
}
header
{
background-image: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav
{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color:white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover{
border: 1px solid white;
}
.logo img
{
width: 150px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero{
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1{
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button
{
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one{
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two{
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2{
height: 1000px;
background-color: red;
}
Full HTML:
<html>
<head>
<title>Summer Website</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class ="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class ="bro">
</div>
</div>
</div>
</header>
<!--particles js file -->
<!-- <h1> TEST </h1> -->
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</div>
<div id=page_2>
</div>
</body>
</html>
There just seems to be problem with your closing tags incorrectly nested. There needs to another closing div before the closing header tag. The snippet shows the hero in a fixed position:
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
Full css: * {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(img/snow.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", "sans-serif";
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hero {
position: fixed;
width: 1500px;
margin-left: 0px;
margin-top: 60px;
}
h1 {
color: white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
/* margin-top: 275px; */
margin-top: 220;
}
.button {
margin-top: 30px;
margin-left: 440px;
position: sticky;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: sticky;
}
.btn-one {
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two {
font-family: "Roboto", sans-serif;
position: sticky;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-y: auto;
overflow-x: hidden;
}
#page_2 {
height: 1000px;
background-color: red;
}
<header>
<div id="page_1">
<div id="particles-js">
<div class="row">
<!-- <div class ="logo">
<img src="https://i.imgur.com/0PyA8HR.png" alt="">
</div> -->
<ul class="main-nav">
<li class="active"> HOME </li>
<li> ABOUT </li>
<li> PORTFOLIO </li>
</ul>
</div>
<div class="hero">
<h1>HI I'M KACIE AND I LOVE SOLVING PROBLEMS.</h1>
<div class="button">
LINKEDIN
RESUME
</div>
<div class="bro">
</div>
</div>
</div>
</div>
</header>
<div id=page_2>
</div>
Use position:inherit
You are using fixed and I think that is causing your issue.
Inherit won’t move, absolute stacks, fixed scrolls with page, static is default.
I'm very new to HTML and CSS and have finally created my new website. The site works fine on my laptop and PC, but when I open it on my phone, there is this huge white space covering half my screen in portrait mode. It's perfectly fine in landscape mode.
I want my website to be completely zoomed in when opened in portrait mode, so that you can swipe/scroll to navigate on the site and get rid of the white space. Basically, at the moment, when the site is opened, it zooms out to show 100% of the site, but I only want it to show whatever fits the mobile screen in portrait mode. Hope my question is clear. I've been searching for an answer for over 3 hours now. Please help me guys :(
My css: https://pastebin.com/AeHyczJh
My HTML: https://pastebin.com/N5jV8yqY
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta name="description" content="Affordable and professional web design">
<meta name="keywords" content="web design, affordable web design, professional web design">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrap">
<header>
<div class="container">
<img src="images/final.png" width="162" height="200" alt="logo" id="logo"/>
<nav>
<ul>
<li class="current">Home</li>
<li class="dropdown">
Registration
<div class="dropdown-content">
Team
Individual
Coach a team
Manage a team
</div>
</li>
<li class="dropdown">
KWSA Women's Soccer League
<div class="dropdown-content">
Match Schedule
Practice Schedule
Pitch Locations
Team Kits
Top Scorers
</div>
</li>
<li class="dropdown">
Sponsors
<div class="dropdown-content">
Sponsors of KWSL
Sponsor a team
</div>
</li>
<li class="dropdown">
Info
<div class="dropdown-content">
Rules
FAQ
</div>
</li>
<li>The Carpool Program</li>
</ul>
</nav>
</div>
</header>
<section id="main_content">
<iframe width="560" height="315" src="https://www.youtube.com/embed/WSd0HZVh5pE?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<div id="main_text">
<h1></h1>
<p></p>
</div>
</section>
<footer>
<div class="foot-container">
<img src="images/fb.png" class="social_fb">
<img src="images/youtube.png" class="social_youtube">
<img src="images/insta.png" class="social_insta">
<img src="images/mail.png" class="social_mail">
</div>
</footer>
</div>
</body>
</html>
#font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url(''); /*URL to font*/
}
#charset "utf-8";
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
html{
max-height: 5px;
}
}
body{
font: 15px/1.5 Arial, Helvetica,sans-serif;
padding:0;
margin:0;
background-color:#f4f4f4;
overflow: scroll;
background: url(images/field.jpg) no-repeat 0 -200px;
}
h1,
p{
margin: 0;
}
#wrap{
}
.container{
margin: auto;
overflow: hidden;
}
header{
padding-top: 30px;
min-height: 70px;
padding-bottom: 0px;
min-width: 1300px;
padding-left: 20px;
}
#logo{
position: absolute;
top: 20px;
left: 20px;
margin: auto;
}
header li{
float:center;
display:inline;
padding: 0 70px 0 0px;
}
nav{
float: right;
}
header a{
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size: 12px;
}
header a:hover{
font-weight: bold;
}
iframe{
position: static;
top: 300px;
left: 200px;
float:right;
box-shadow: 10px 10px 100px black;
overflow: hidden;
margin: 200px 20px 0px 0px;
}
#main_content{
position: static;
min-height: 700px;
min-width: 1300px;
width: 100%;
z-index: 1;
}
#main_content h1{
position: absolute;
left: -135px;
top: 165px;
text-align: center;
color: #FFFFFF;
font-family:"Bauhaus 93";
font-size: 50px;
min-height: 500px;
min-width: 150px;
}
#main_content p{
color:#FFFFFF;
text-align: center;
height: 10px;
width: 400px;
position: absolute;
left: 410px;
top: 275px;
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: all 700ms ease;
border: black 1px solid;
}
li a:hover, .dropdown:hover .dropbtn {
background: black;
color: white;
box-shadow: inset 0 0 0 3px black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
background: rgba(208,208,208,0.8);
box-shadow: 1px 1px 1px black;
}
.dropdown-content a:hover {background-color:black;}
.dropdown:hover .dropdown-content {
display: block;
}
li a, .dropbtn-2 {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown2:hover .dropbtn-2 {
}
.dropdown-content-2 {
display: none;
position: absolute;
background-color: #1A3C60;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-2 a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content-2 a:hover {background-color:rgba(56,97,159,0.46)}
.dropdown2:hover .dropdown-content-2 {
display: inline-block;
position: absolute;
left: 160px;
margin-top: -47px;
}
li.dropdown2 {
display: inline-block;
}
#FAQ{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
height: 100%;
}
#FAQ h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#FAQ ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#FAQ ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
.social_fb{
position: relative;
top: 15px;
left: 500px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_fb:hover{
background: #3b5998;
}
.social_youtube{
position: relative;
top: 15px;
left: 520px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_youtube:hover{
background: #bb0000;
}
.social_insta{
position: relative;
top: 15px;
left: 540px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_insta:hover{
background: #8a3ab9;
}
.social_mail{
position: relative;
top: 15px;
left: 560px;
border-radius: 50%;
background: rgba(168,168,168,0.7);
transition: all 1s ease;
}
.social_mail:hover{
background: #e4a805;
}
#carpool{
position: static;
background: url(images/faq_bg.png) center no-repeat ;
min-width: 1300px;
min-height: 700px;
width: 100%;
z-index: 1;
height: 100%;
}
#carpool h1{
padding-top: 75px;
color: #e4e3e3;
font-family:"Bauhaus 93";
font-size: 50px;
text-align: center;
left: 390px;
}
#carpool ul p{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
font-weight: normal;
}
#carpool ul{
text-align: left;
color: #e4e3e3;
max-width: 500px;
position: relative;
left: 400px;
top: 50px;
z-index: 2;
font-weight: bold;
}
#soon{
position: absolute;
left: 550px;
top: 300px;
}
As part of a school project I am trying to create my first webpage. I am however stuck on this issue where my navigation bar moves down the page when I place a logo in the top bar and center it. I wonder if anyone could help?
JS Fiddle: https://jsfiddle.net/3k65c20u/
Here is my code:
#header {
height: 200px;
width: 100%;
background-color: black;
}
#top-bar {
background-repeat: repeat-x;
position: absolute;
left: 0;
width: 100%;
height: 200px;
padding: 0px;
margin: 0px;
}
//Top Navigation Bar//
.navigation-bar {
background-color: black;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 250px;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.navigation-bar ul {
padding: 210px;
margin: 0px;
text-align: center;
}
.navigation-bar li {
list-style-type: none;
padding: 8px;
height: 24px;
margin-top: 30px;
margin-bottom: 4px;
display: inline;
}
.navigation-bar li a {
color: gray;
background-color: black;
font-size: 13px;
text-transform: uppercase;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
box-shadow: 0px;
border-radius: 3px;
padding-right: 1em;
padding-left: 1em;
line-height: 2em;
margin-right: 16px;
}
.navigation-bar li:first-child {
margin-left: 20px;
border: #C00;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="feistybite.css">
<div id="header">
<div id="top-bar"></div>
<div class="navigation-bar">
<img src="strikerlogo.png" class="center">
<div id="navigation-container" class="cf">
<ul>
<li>Miten se toimii
</li>
<li>Osta
</li>
<li>Tarina
</li>
<li>Meistä
</li>
<li>Uutisia
</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
not sure what design you want achieve, but i just changed the navigation bar position to relative, and the image to absolute, so... set left to 50% and using the CSS property transform: translateX(-50%); the image is finally centered
https://jsfiddle.net/3k65c20u/1/
Remove the padding: 210px at the .navigation-bar ul rule!
change css in ul to, removing padding:210px;
.navigation-bar ul {
margin: 0px;
text-align:center;
}
I tried researching this question on this site, but everything wasn't related to my particular site. Pretty much I have a background image on my home page, and the background is "fixed" and "covered". I am not sure if that's the reason why it is not working. I want the "View Works" button in the center of the computer. Please help!
HTML:
<html>
<head>
<meta charset="UTF-8">
<title>Kasia's Website </title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<a href="works.html">
<input class="butt" type="button" value="VIEW WORKS" />
</a>
</div>
<div id="page">
<div id="sidebar">
<div>
<a href="index.html"><img id="logo"
src="http://i66.tinypic.com/xnf4us.png" /></a>
</div>
<div>
<ul class="sb">
<li> Home </li>
<li> About </li>
<li> Works </li>
<li> Contact </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div>
</body>
</html>
CSS
#charset "UTF-8";
body {
background-image: url(http://i66.tinypic.com/ww1d7n.png);
background-attachment: fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-family: "Helvetica Neue";
}
#sidebar {
background: #05E2D4;
background-color: rgba(5, 226, 212, 0.7);
width: 220px;
height: 100%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul.sb {
margin: 0px;
padding: 0px;
}
ul li {
list-style: none;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
padding: 200px;
display: block;
width: 180px;
padding: 30px;
text-transform: uppercase;
font-weight: 105;
letter-spacing: 2.5px;
line-height: 30%;
margin-left: 20px;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 15px;
position: absolute;
margin: 20px;
top: 0px;
right: -60px;
cursor: pointer;
}
#sidebar-btn span {
height: 2px;
background: #000000;
margin-bottom: 5px;
display: block;
}
a {
text-decoration: none;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: none;
}
a:hover {
color: #ffcd03;
}
a:active {
color: #ffcd03;
}
#logo {
margin: 20px 50px 20px 50px;
}
#page {
max-width: 800px;
min-width: 600px;
}
#Kasiaport {
width: 500px;
margin: 50px 200px 50px 200px;
}
aside {
width: 30%;
background-color: white;
padding: 40px 40px 20px 40px;
margin: auto;
}
p.work {
color: white;
font-size: 9px;
text-transform: uppercase;
border-style: solid;
border-color: white;
margin-left: auto;
margin-right: auto;
width: 70px;
padding: 15px 30px 15px 30px;
display: block;
}
.butt {
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: transparent;
border-radius: 2px;
color: #ffffff;
font-size: 15px;
padding: 10px 20px 10px 20px;
border: solid #FFFFFF 2px;
text-decoration: none;
font-weight: 200;
letter-spacing: 1.5px;
font-family: "Helvetica Neue";
text-align: center;
margin-left: 45%;
margin-top: 32%;
position: absolute;
}
.butt:hover {
border-color: #ffcd03;
background-color: none;
color: #ffcd03;
text-decoration: none;
}
http://codepen.io/kasiariele/pen/MaLdWv/
In order to see the error visually, you may need to go in full screen mode (http://codepen.io/kasiariele/full/MaLdWv/) or make the screen smaller so you can see it scroll.
Thank you.
Don't use margin to "center" your elements as you did.
You can add this code and the button will be centered both horizontally and vertically without having to adjust your old code:
.butt {
margin: 0; /* reset your old margin */
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Check browser support for transforms and any extra prefixes needed (-ms for ie9).