Dynamically fill as much width as possible - html

Question

I have a fixed menubar in the left side. To the right of that I got a section. That section is suppossed to fill 100% of the viewport width minus the fixed menubar width and minus the margin and padding of the section itself.
Now I am also trying to center an image inside of this section - that is the black line that you can see in the fiddle. It is suppossed to be centered in the blue area (the section).
Issue
The section is too wide which you can see, by how the image is not centered but moved a little to the right.
Note:
It should not be possible to scroll the x-axis
Code -> https://jsfiddle.net/n9yyrxfm/
html,
body {
border-sizing: border-box;
font-family: "Dosis", "Arial", "Serif";
text-decoration: none;
font-size: 20px;
margin-left: 10px;
padding: 0;
height: 100%;
width: 100%;
}
.navbar-menu {
z-index: 100;
position: fixed;
width: 15vw;
height: 100%;
color: #000;
margin-top: 4vh;
}
.navbar-menu ul {
padding-left: 0;
}
.navbar-menu ul li {
display: block;
width: 140px;
font-size: 22px;
padding: 4px 0 4px 10px;
margin-top: 20px;
}
p {
width: 250px;
}
div#content {
/*margin-left: -140px*/
margin-left: 160px;
margin-right: 160px;
height: 200px;
}
section {
width: 100%;
color: #000;
display: block;
position: absolute;
top: 35px;
background: lightblue;
transition: opacity 0.9s linear;
-webkit-transition: opacity 0.9s ease-in-out;
-moz-transition: opacity 0.9s ease-in-out;
}
section#sec-home img {
width: 250px;
display: block;
margin: 0 auto 0 auto;
border-radius: 76px 171px 87px 171px;
-moz-border-radius: 76px 171px 87px 171px;
-webkit-border-radius: 76px 171px 87px 171px;
border: 5px solid #000000;
-webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
-moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
}
<nav class="navbar-menu">
<ul id="list" class="test">
<li id="emph nav-home">Home</li>
<li id="nav-portfolio">Portfolie</li>
<li id="nav-skills">Færdigheder</li>
<li id="nav-erfaring">Erfaring</li>
<li id="nav-kontakt">Kontakt mig</li>
</ul>
</nav>
<div id="content">
<section class="animatedFade" id="sec-home">
<img src="images/portrait1.png" alt="">
<p>asdfr <span class="navn">asdfian</span></p>
</section>
</div>

Answer 1

Since you are using position: fixed for the left sidebar, please use a padding of the same for the parent. So instead of the content having both margin-left and margin-right, leave the content with full width, without the margin.
html,
body {
border-sizing: border-box;
font-family: "Dosis", "Arial", "Serif";
text-decoration: none;
font-size: 20px;
margin-left: 10px;
padding: 0 0 0 15vw; /* Change this to navbar width. */
height: 100%;
width: 100%;
margin: 0; /* Add this. */
box-sizing: border-box; /* Add this. */
}
.navbar-menu {
z-index: 100;
position: fixed;
width: 15vw;
height: 100%;
color: #000;
left: 0; /* Add this. */
margin-top: 4vh;
}
.navbar-menu ul {
padding-left: 0;
}
.navbar-menu ul li {
display: block;
width: 100%;
font-size: 22px;
padding: 4px 0 4px 10px;
margin-top: 20px;
}
p {
width: 250px;
}
div#content {
/* Remove these.
margin-left: 160px;
margin-right: 160px;
*/
height: 200px;
}
section {
/* width: 100%; remove */
color: #000;
display: block;
/* position: absolute; remove */
margin-top: 35px; /* replace */
background: lightblue;
transition: opacity 0.9s linear;
-webkit-transition: opacity 0.9s ease-in-out;
-moz-transition: opacity 0.9s ease-in-out;
}
section#sec-home img {
width: 250px;
display: block;
margin: 0 auto 0 auto;
border-radius: 76px 171px 87px 171px;
-moz-border-radius: 76px 171px 87px 171px;
-webkit-border-radius: 76px 171px 87px 171px;
border: 5px solid #000000;
-webkit-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
-moz-box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
box-shadow: 0px 0px 202px 0px rgba(0, 0, 0, 0.49);
}
<nav class="navbar-menu">
<ul id="list" class="test">
<li id="emph nav-home">Home</li>
<li id="nav-portfolio">Portfolie</li>
<li id="nav-skills">Færdigheder</li>
<li id="nav-erfaring">Erfaring</li>
<li id="nav-kontakt">Kontakt mig</li>
</ul>
</nav>
<div id="content">
<section class="animatedFade" id="sec-home">
<img src="images/portrait1.png" alt="">
<p>asdfr <span class="navn">asdfian</span></p>
</section>
</div>
This is an issue of Fixed Fluid Layout. Please refer to my guide on Science behind Fixed-Fluid Layouts.

Answer 2

Since your .navbar-menu has position: fixed it gets ignored by all other elements.
However, since it has a fixed width, you can easily solve your problem using calc like this:
section {
width: calc(100% - 15vw);
}
Note that you will then also need to remove Margins from your section as to not make it bigger than that.