I've been struggling with my code for the past couple of days, but nothing seems to be working. I need the navigation bar to be perfectly centered between two elements (<img> and <form>). Right now, it's almost centered, but it starts messing up when the window is resized to around 1600px. However, I only really need it to work up to 1500px because I plan on changing the navigation bar location and style after that.
Check out the Codepen here: http://codepen.io/anon/pen/KpECd
Here's the HTML:
<header>
<img src="../Images/Logo.svg" class="logo">
<nav>
<a href="#" class="one">SHARING</a>
<a href="#" class="two">HOSTING</a>
<a href="#" class="three">PRICING</a>
<a href="#" class="four">ACCOUNT</a>
</nav>
<form method="post" action="index.php">
<button value="SIGNUP" name="signup">SIGNUP</button>
<button value="LOGIN" name="login">LOGIN</button>
</form>
</header>
And here's the CSS:
@charset "utf-8";
header {
background-color:#464646;
height:100px;
width:100%;
}
header .logo {
max-height:44px;
max-width:535px;
margin:28px 28px 28px 28px;
}
header form {
display:inline;
float:right;
margin:28px 28px 28px 28px;
}
header form button {
height:44px;
width:125px;
border:2px solid white;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:transparent;
font-family:"Lato Black";
color:white;
font-size:22px;
}
header form button:hover {
background-color:rgba(255, 255, 255, .2);
cursor:pointer;
}
header form button:active {
background-color:rgba(255, 255, 255, .8);
}
nav {
width:47.5%;
display:inline;;
position:absolute;
text-align:center;
}
nav a {
display:inline-block;
height:100px;
width:20%;
color:white;
font-family:"Lato Black";
text-decoration:none;
font-size:16px;
line-height:100px;
}
nav a:hover {
background-color:#00a651;
cursor:pointer;
}