<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="logo" class="logo">
<ul class="main-nav">
<li><a href="#">Food delivery</a></li>
<li><a href="#">How it works</a></li>
<li><a href="#">Our cities</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</nav>
I am currently following an online tutorial on Udemy which includes the code above for a navigation bar. The CSS for the navbar is shown below:
.row {
max-width: 1140px;
margin: 0 auto;
}
.logo {
height: 100px;
width: auto;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
I am puzzled by the positioning of the image within the div with the class="row". Even though I did not specify float: left for the img, it is displayed in the top left corner. Contrarily, I had to set float: right for the ul with the class="main-nav".