Needing help structuring a navbar on html and css - html

Question

I'm new to HTML and CSS.
I'm trying to do a website, and I'm starting by the navbar, but this navbar is not "scalable" for every screen side, when it is on full screen fine but when I minimize it it does not load the part on the right side wich is "About". All of the menus are pointing to the same page and for now that's the objective.
Here's the Code:
body {}
.navbardiv {}
.navbar_ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow:hidden;*/
background-color: #333;
border: 5px solid gray;
margin: -8px;
width: auto;
min-width: 600px;
height: 70px;
}
li {
float: left;
padding: 10px 150px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting">Webhosting</li>
<li class="navbar_li_About">About</li>
</ul>
</div>

Answer 1

You are setting the padding for li to 150px which is very high, you need to reduce.
But if you want the links to take the whole width and to be evenlly spaced, then you can use flex box and justify-content: space-between;
see code snippet:
body {}
.navbardiv {}
.navbar_ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow:hidden;*/
background-color: #333;
border: 5px solid gray;
margin: -8px;
width: auto;
min-width: 600px;
height: 70px;
display: flex;
justify-content: space-between;
}
li {
float: left;
padding: 10px 20px;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<!--NAVBAR-->
<div class="navbardiv">
<ul class="navbar_ul">
<li class="navbar_li_Contact">Contact</li>
<li class="navbar_li_WebHosting">Webhosting</li>
<li class="navbar_li_About">About</li>
</ul>
</div>

Answer 2

Your navbar is not responsive because of min-width: 600px; part. What this one will do is that when screen resolution is below 600px in width it will keep your navbar at 600 px. Thus it will align it to leftmost part of the screen which will leave you a cropped right edge.min-width:100%; wont work either since it will start to crop when inner elements of the navbar will not fit.
It is easy to fix this. Just change it to width:100%;.