I need the blue color of the navigation bar to cover the entire screen, while keeping the About, Updates, and Who am I? links centered. The background should adjust accordingly if there are any resizing changes. If there's a better method for centering, I'm open to trying it out.
.centered {
display: flex;
justify-content: center;
}
#navbar {
background: #0099CC;
color: #FFF;
height: 51px;
padding: 0;
margin: 0;
border-radius: 0px;
}
*{
padding:0;
margin:0;
}
#navbar ul, #navbar li {
margin: 0 auto;
padding: 0;
list-style: none
}
#navbar ul {
width: 100%;
}
#navbar li {
float: left;
display: inline;
position: relative;
}
#navbar a {
display: inline-block;
display:flex;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 16px;
text-align: center;
}
#navbar li a:hover {
color: #0099CC;
background: #F2F2F2;
}
#navbar label {
display: none;
line-height: 51px;
text-align: center;
position: absolute;
left: 35px
} <div class="centered">
<nav id='navbar'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Updates</a></li>
<li><a href='#'>Who am I?</a></li>
</ul>
</nav>
</div>