I'm having trouble positioning a menu at the top of my webpage following a tutorial. The menu icon doesn't seem to reach all the way to the left side of the page.
Despite multiple attempts to adjust the margin and padding settings, I can't seem to get it right. Here is the tutorial link.
.nav-main {
position: fixed;
top: 0;
width: 100%;
height: 60px;
background-color: #FFF;
display: flex;
flex-wrap: wrap;
z-index: 1000;
}
.btn-toggle-nav {
width: 60px;
height: 60px;
background-color: #F98F39;
background-image: url("https://via.placeholder.com/500");
background-repeat: no-repeat;
background-size: 60%;
background-position: center;
cursor: pointer;
}
.nav-sidebar {
position: fixed;
left: 0;
bottom: 0;
width: 50px;
height: calc(100vh - 60px);
padding: 0 5px;
background-color: white
}<nav class="nav-main">
<div class="btn-toggle-nav"></div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Project</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<aside class="nav-sidebar">
<ul>
<li><span href="#">More</span></li>
<li><a href="#">Original Write-Up</a></li>
<li><a href="#">Procedure</a></li>
<li><a href="#">Why We Started</a></li>
<li><a href="#">What We Hope To Accomplish</a></li>
</ul>
</aside>While most elements are displaying correctly, the main div seems slightly off to the right, causing white space on the left. This misalignment makes the menu icon and sidebar appear disconnected, affecting the overall look of the page.