Needing help structuring a navbar on html and CSS

Question

I'm new to HTML and CSS. I'm trying to make a website, and I'm starting with 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 which 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"><a href="index.html">Contact</a></li>
    <li class="navbar_li_WebHosting"><a href="index.html">Webhosting</a></li>
    <li class="navbar_li_About"><a href="index.html">About</a></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"><a href="index.html">Contact</a></li>
    <li class="navbar_li_WebHosting"><a href="index.html">Webhosting</a></li>
    <li class="navbar_li_About"><a href="index.html">About</a></li>
  </ul>
</div>