I've been grappling with creating a navigation bar for a website, aiming to position 4 elements on the left side of the screen and 2 on the right. Despite knowing that there's likely a straightforward solution, I'm struggling to get the elements to align as desired.
Below is my HTML code:
<div id="navbar">
<ul>
<!--<li><a href="index.html" class="logo"><img src="../img/PowerUpLogo.gif" class="logo"></a></li>-->
<li><a href="home.html">Brand</a></li>
<li><a href="stories.html">Link</a></li>
<li><a href="community.html">Link</a></li>
<li><a href="contact.html">Link</a></li>
<span class="padding"><a href="log_in.html" class="button button-log-in">Log In</a></span>
<span class="padding"><a href="sign_up.html" class="button button-sign-up">Sign Up</a></span>
</ul>
</div>
Here is the CSS styling I have applied:
/*****NAVBAR****/
#navbar ul {
padding: 0;
margin: 0;
overflow: hidden;
}
#navbar ul li {
display: inline-block;
padding: 1.5% 2%;
}
#navbar ul li a {
color: #4F8E64;
font-size: 0.9em;
font-weight: 500;
}
#navbar ul li a:hover {
text-decoration: underline;
}
/**********************
******NAV BUTTONS******
**********************/
.button {
font-size: 0.9em;
}
.button-log-in {
color: #6EC78B;
background-color: #FFF;
border: 1px solid #6EC78B;
}
.button-log-in:hover {
color: #5CE68A;
border: 1px solid #5CE68A;
}
.button-sign-up {
color: #FFF;
background-color: #6EC78B;
}
.button-sign-up:hover {
background-color: #5CE68A;
}