So, I’m learning HTML/CSS through FreeCodeCamp and each project I build, there is always this tiny gab between the left side; see screenshot. In this example, my navbar is not filling up the space to the max on the left. There is that gab of the same color as the body.
I can’t figure out from where it comes from lol help.
Thank you.
I use Brave as browser.
Screenshot problem
My CSS code;
Sorry if it is not the best, still at the start of my learning journey c:
Thank youu
body {
font-family: helvetica neue;
font-size: 15px;
background-color: #060d13;
color: white;
}
.main_nav {
position: fixed;
bottom: 0;
font-size: 25px;
background-color: #132639;
width: 15%;
height: 100%;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
.nav_header {
font-family: Courier New;
font-size: 30px;
padding: 1rem;
background-color: #060d13;
}
.main_nav a {
padding: 1rem;
color: white;
font-family: Courier New;
text-decoration: none;
}
.main_nav a:hover {
background-color: #060d13;
}
HTML
<body>
<nav class="main_nav" id="navbar">
<header class="nav_header">Accessibility</header>
<a class="nav-link" href="#Introduction"class="active">Introduction</a>
<a class="nav-link" href="#Types_of_Disabilities">Types of Disabilities</a>
<a class="nav-link" href="#HTML">HTML</a>
<a class="nav-link" href="#CSS_and_JavaScript">CSS and JavaScript</a>
<a class="nav-link" href="#WAI-ARIA_Basics">WAI-ARIA Basics</a>
<a class="nav-link" href="#References">References</a>
</nav>
I tried to change the navbar margin but nothing happens.
New contributor
LunaG is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.