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.
Here is the website when it's slightly minimized.
This is the website when it's completely minimized.
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;
}