Hey guys I started learning html and css so i coded a navigation bar but when i open it on my pc's google chrome and zoom it more than 100% it messes the whole webpage by misplacing the fonts.Please guys help me i have added the html and css code below. The same thing happens when i zoom out it also misplaces the fonts destroying the layout.
this is the webpage at 100% zoom or original webpage
this is the webpage at more zoom
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="design.css">
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Sriracha&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@1,700&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="background">
<nav><label id="logo">Artworx</label>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Art gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
<div class="Banner">
<h1>When <span>in doubt,<br>leave it</span> white.</h1>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.background{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.6)),url(background.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
}
nav{
margin-top: 0px;
background-color: rgba(237,106,90,0.5);
height: 11vh;
width: 100vw;
align-items: center;
}
nav label{
padding-left: 25px;
line-height: 65px;
color: black;
font-size: 45px;
font-family: 'Lobster', cursive;
}
nav ul{
float: right;
margin-top: 25px;
margin-right: 50px;
}
nav ul li{
margin-left: 30px;
list-style: none;
display: inline-block;
}
nav a{
text-decoration: none;
color: black;
font-family: 'Sriracha', cursive;
transition: 0s background-color;
padding-left: 5px;
padding-right: 5px;
}
.Banner{
margin-left: 80px;
margin-top: 40px;
color: white;
font-family: 'Balsamiq Sans', cursive;
}
.Banner h1{
font-size: 60px;
}
.Banner h1 span{
color: #0ED2F7;
}
nav a:hover {
background-color: yellow;
transition-delay: 0.5s;
transition-duration: 1s;
}
question from:
https://stackoverflow.com/questions/65833776/zooming-webpage-more-than-100-it-the-messes-the-whole-texts 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
