I'm currently learning the ins and outs of HTML/CSS while working on a navigation bar. However, I've run into an issue with scaling. Here is the website in full-screen mode.https://i.sstatic.net/kCFqn.png
Here is the website when it's slightly minimized. https://i.sstatic.net/b1H9w.jpg
This is the website when it's completely minimized. https://i.sstatic.net/UtuxY.jpg
As you can see, when I scale the website to different sizes, the proportions go haywire, causing overlap. Despite my efforts to make the children absolute and keep the containers relative, and using em's for measurements instead of pixels, I still face this issue. Is there a way to maintain proportionality while scaling?
Here's the js fiddle: https://jsfiddle.net/2w1r136j/2/
HTML
<div class="container">
<header>
<nav>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
<div class="leftNavContainer">
<a href="#">Home</a>
<a href="#">Story</a>
</div>
<div class="rightNavContainer">
<a href="#">Characters</a>
<a href="#">Create</a>
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
.container {
width: 100%;
height: 100%;
position: absolute;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important;
display: block;
margin-top: 0;
}
.leftNavContainer {
position: absolute;
float: left;
}
.leftNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
.rightNavContainer {
float: right;
}
.rightNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}