Just starting out with HTML and CSS and working on creating a website. I'm starting with the navbar, but I'm facing an issue with scaling for different screen sizes. In full screen, it looks fine, but when minimized, the "About" part on the right side doesn't load. Currently, all menus point to the same page, which is my current 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>