I'm in the process of recreating a simple navigation menu and I've reached the section where I am encountering an issue with the list items. The orange li element is not filling up 100% of the width, and I also need the links to align in the middle instead of being centered. Here's an example of what I am trying to achieve:
Take a look at this example page for reference. You can also see a screenshot below:
https://i.stack.imgur.com/DKPhx.jpg
This is my current progress so far:
.page-header{
display: inline-block;
margin: 0;
position: absolute;
vertical-align: middle;
width: 100%;
z-index: 110;
background-color: aqua;
}
.header-standard {
height: 86px;
}
.branding{
display: block;
float: left;
}
.branding img {
height: 60px;
margin: 15px 25px;
}
.standard-nav{
height: 100%;
display: block;
float: right;
}
.special-link {
display: inline;
background-color: #ff5252;
width: 200px;
height: auto;
text-align: center;
margin: 0;
}
.standard-nav > ul > li {
bottom: 0;
}
.standard-nav ul li {
display: inline-block;
padding: 0;
margin: 0;
}<header class="page-header">
<div class="header-standard">
<div class="branding">
<img src="http://via.placeholder.com/350x150">
</div>
<nav class="standard-nav">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li class="special-link">Special Link</li>
</ul>
</nav>
</div>
</header>