I have a website in progress and I'm facing an issue with my navbar distorting when I zoom in. As I increase the page's zoom, the navigation buttons start moving apart and eventually overlap each other. How can I prevent this from happening? Below is the code snippet:
HTML:
<header>
<div class="main">
<div class="logo-text">
<h1 class="text-logo">Title</h1>
</div>
<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="store.html">Store</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
CSS:
* {
margin: auto;
padding: auto;
box-sizing: border-box;
font-family: Century Gothic;
}
header {
height: 15%;
background-size: cover;
background-position: center;
background-color: #ebebeb;
border-bottom: 5px solid #A9A9A9;
}
html,
body {
/* background: #000000;*/
font-size: .80em;
/* font-family: "Balsmiq", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;*/
margin: 0%;
padding: 0%;
color: #696969;
height: 100%;
width: 100%;
}
ul {
list-style-type: none;
text-align: center;
margin-top: -3.7%;
}
ul li {
display: inline-block;
margin-left: 0%;
font-size: 170%;
}
ul li a {
transition: 0.6s ease;
text-decoration: none;
color: #000000;
padding: 5px 40px;
border: 2px solid #000000;
font-weight: 700;
}
ul li a:hover,
.active {
background-color: #000000;
color: #ffffff;
}
.main {
min-width: 300px;
}
.main h1 {
padding: 1.5%;
margin-left: 3%;
font-family: Leckerli One;
color: black;
font-size: 3.1875rem;
}
Any advice on how to resolve this issue would be greatly appreciated!