I’m trying to move the navbar contents to the right side of the page but it’s not aligning with the navbar title.
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica;
}
header li {
list-style: none;
float: right;
display: inline;
padding: 20px;
padding-left:3px;
}
header {
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 8px #ddd;
}<header>
<h1> Dev101 </h1>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>>Solution :
You can add a float to the nav:
header h1 {
display: inline-block;
}
nav {
float: right;
}