Element width displayed incorrectly - html

Question

The problem is that my header has a fixed width of 150px, but in browser it gets displayed as 134.984px and I can't figure out why. I've tried everthing that I could think of but nothing worked. The only thing I've managed to figure out is that it's the content-wrap flex item that is pushing on the headerand making it smaller.
Here's the HTML:
/*======= Container =======*/
#container{
display: flex;
flex-direction: row;
min-height: 100vh;
}
#content-wrap {
width: 100%;
}
/*======= Sāna izvēlne / header =======*/
header {
min-height: 100vh;
width: 150px;
margin: 0;
}
.header-position {
width: inherit;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
}
nav {
background-color: #ffffff;
}
nav ul{
padding: 0;
margin: 0;
}
nav li, a {
text-decoration: none;
list-style-type: none;
text-align: right;
font-size: 1em;
color: black;
}
.logo {
background: url("../images/AG.svg");
background-size: contain;
background-repeat: no-repeat;
width: 80px;
}
/*======= Banneris =======*/
.banner-container {
background-image: url("../images/lp-background.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 300px;
clear: right;
}
.banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.banner h1 {
color: white;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.4em;
border: solid 10px white;
padding: 20px 30px;
}
/*======= Par mums =======*/
#about {
width: 100%;
height: 300px;
background-color: pink;
}
#about .first, .second {
width: 50%;
height: 100%;
display: inline-block;
}
#about .first {
}
#about .second {
float: right;
}
.about-picture {
height: 200px;
width: 200px;
margin: 50px 50px;
border-radius: 150px;
border: solid 4px rgb(246, 243, 199);
}
.about-picture.right {
float: right;
}
img.right {
float: right;
}
<div id="container">
<header>
<div class="header-position">
<img class="logo" src="./images/AG.svg" alt="AG Logo"></img>
<nav>
<ul>
<li>Sākums</li>
<li>Attēli</li>
<li>Kontakti</li>
<li>Par mums</li>
</ul>
</nav>
Sazinies ar mums
</div>
</header>
<div id="content-wrap">
<div class="banner-container">
<span class="banner"><h1>Whatever</h1></span>
</div>
<div id="about">
<div class="first">
<img class="about-picture left" src="./images/lp-background.jpg" alt="" />
</div>
<div class="second">
<img class="about-picture right" src="./images/lp-background.jpg" alt="" />
</div>
</div>
</div>
How do I get the 'header' to be displayed correctly?

Answer 1

As it's a flex-item you need to set it's flex properties accordingly.
header {
min-height: 100vh;
width: 150px;
margin: 0;
background-color: red;
flex: 0 0 150px; /* don't grow, don't shrink, be 150px wide */
}
/*======= Container =======*/
#container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
#content-wrap {
width: 100%;
}
/*======= Sāna izvēlne / header =======*/
header {
min-height: 100vh;
width: 150px;
margin: 0;
background-color: red;
flex: 0 0 150px;
}
.header-position {
width: inherit;
height: 100vh;
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-between;
}
nav {
background-color: #ffffff;
}
nav ul {
padding: 0;
margin: 0;
}
nav li,
a {
text-decoration: none;
list-style-type: none;
text-align: right;
font-size: 1em;
color: black;
}
.logo {
background: url("../images/AG.svg");
background-size: contain;
background-repeat: no-repeat;
width: 80px;
}
/*======= Banneris =======*/
.banner-container {
background-image: url("../images/lp-background.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 300px;
clear: right;
}
.banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.banner h1 {
color: white;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 0.4em;
border: solid 10px white;
padding: 20px 30px;
}
/*======= Par mums =======*/
#about {
width: 100%;
height: 300px;
background-color: pink;
}
#about .first,
.second {
width: 50%;
height: 100%;
display: inline-block;
}
#about .first {} #about .second {
float: right;
}
.about-picture {
height: 200px;
width: 200px;
margin: 50px 50px;
border-radius: 150px;
border: solid 4px rgb(246, 243, 199);
}
.about-picture.right {
float: right;
}
img.right {
float: right;
}
<div id="container">
<header>
<div class="header-position">
<img class="logo" src="./images/AG.svg" alt="AG Logo"></img>
<nav>
<ul>
<li>Sākums
</li>
<li>Attēli
</li>
<li>Kontakti
</li>
<li>Par mums
</li>
</ul>
</nav>
Sazinies ar mums
</div>
</header>
<div id="content-wrap">
<div class="banner-container">
<span class="banner"><h1>Whatever</h1></span>
</div>
<div id="about">
<div class="first">
<img class="about-picture left" src="./images/lp-background.jpg" alt="" />
</div>
<div class="second">
<img class="about-picture right" src="./images/lp-background.jpg" alt="" />
</div>
</div>
</div>