As someone who is new to HTML and CSS, I am facing a challenge with aligning the items within a navigation bar on my website. The list serves as a navigation bar and is contained inside the "inner header" div. While I was able to align the entire "nav" container (in teal) to the right edge of the "inner header" container, I am struggling to achieve the same alignment for the individual items within the nav (in red).
The appearance of the containers can be seen here.
I have attempted various approaches, including setting the width to 100% which caused the text to separate into multiple rows, possibly due to the display type. Another attempt involved adding a width of 98px, which brought me closer to the desired outcome but did not perfectly align with the teal background.
You can see how close I got to the desired outcome here.
Your advice would be greatly appreciated!
.inner_header {
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
background-color: #8ecae6;
display: flex;
justify-content: center;
align-items: center;
}
.nav {
float: right;
height: 100%;
width: 70%;
background-color: teal;
text-align: right;
}
.nav a {
height: 100%;
display: table;
table-layout: fixed;
float: left;
padding: 0px 20px;
background-color: red;
overflow: hidden;
width: 98px;
}
.nav a:last-child {
padding-right: 0px;
}
.nav a li {
display: table-cell;
vertical-align: middle;
height: 100%;
font-family: 'Montserrat';
font-weight: 300;
}<div class="header">
<div class="inner_header">
<div class="logo_container">
<img src=".png">
<img src=".jpeg">
</div>
<p>Text <br> Text</p>
<ul class="nav">
<a>
<li>Home</li>
</a>
<a>
<li>Data</li>
</a>
<a>
<li>Tool</li>
</a>
</ul>
</div>
</div>