As a newcomer to the coding world, I am encountering an issue with my Navbar. Everything appears fine at 100% zoom on the browser, but when I zoom in to 150%, everything becomes jumbled. How can I ensure that everything stays the same size regardless of zoom level? Thank you for your assistance.
* {
margin: 0;
padding: 0;
}
.pre-header {
background-color: #111618;
height: 60px;
color: #fff;
padding-top: 15px;
}
.pre-header .secondary-menu {
list-style: none;
}
.pre-header .secondary-menu li {
display: inline-block;
margin-left: 15px;
}
.pre-header .secondary-menu li a {
color: #787374;
text-transform: uppercase;
}
.main-nav .main-menu {
list-style: none;
margin-top: 15px;
}
.main-nav .main-menu li {
display: inline-block;
margin: 10px;
}
.main-nav .main-menu li a {
color: #767676;
text-transform: uppercase;
}
.main-nav img {
margin-top: 10px;
}
.main-nav .main-menu .free-quote-btn a {
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8dcc6ddc6db">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="probaferomotosajta.css">
<title>Feromoto - Hidraulicna creva</title>
</head>
<body>
<header>
<div class="pre-header">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>UNDER ATTACK? - S.O.S LINE 880.000.800</p>
</div>
<div class="col-md-6">
<ul class="secondary-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Presale Service</a></li>
<li><a href="#">Whitepapers</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="main-nav">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="slika1.png" width="120" height="120" alt="">
</div>
<div class="col-md-8">
<ul class="main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Rating</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Job</a></li>
<li class="free-quote-btn"><a href="#">Free Quote</a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d5d293328332e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>