Responsive layout, overflow, x-scroll showing - html

Question

everyone.
I'm having a problem with responsive layout. On big screen everything looks fine, the problems emerge when I resize the browser. My navigation doesn't stretch in full width, even though Its width is 100%.
html for nav:
<header>
<div class="navigation">
<h3>lorem<span class="bold">ipsum</span></h3>
<div class="logo">
<h3>your<span class="red">logo</span></h3>
</div>
<div class="nav">
<ul>
<li class="active close">Home</li>
<li class="subMenuToggle">About us</li>
<li>Our work</li>
<li>Our process</li>
<li>Our people</li>
<li>Social</li>
<li>Get in touch</li>
<li><span>Hire</span></li>
<li><span>Careers</span></li>
</ul>
</div>
</div>
<div class="subMenu">
<div class="subNav">
<ul>
<li class="active2">WHAT WE DO</li>
<li>PEOPLE</li>
<li>SERVICES</li>
<li>CONTACT</li>
<li>VALUES</li>
</ul>
</div>
</div>
And, SCSS:
.navigation {
width: 100%;
height: 70px;
background: white;
.nav {
float: right;
margin-top: 10px;
box-sizing: border-box;
ul {
margin: 32 0;
li {
display: inline-block;
margin-right: 30px;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
height: 38px;
font-family: 'Open Sans', sans-serif;
transition: all 200ms ease-in;
span {
color: gray;
}
a {
color: inherit;
display: inline-block;
height: 40px;
text-decoration: none;
}
&:active {
border-bottom: 4px solid rgb(185, 151, 106);
color: rgb(185, 151, 106);
}
}
.active {
border-bottom: 4px solid rgb(185, 151, 106);
color: rgb(185, 151, 106);
}
}
}
Also, images are doing the opposite, they go beyond to view port, so you need to scroll in order to see full width. Since all images are done the same way, he's a one example:
HTML:
<div class="container">
<div class="section1">
<img src="Assets/img/Header/Header.PNG" alt="header1">
<div class="contentBox1">
<p class="kicker2">Sed ut Perspiciatis</p>
<h2>Nemo Enim</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis feugiat risus nec scelerisque. Sed sagittis magna quis sodales convallis. In convallis nec lacus sed fermentum. Integer ultrices felis ac quam commodo, a viverra enim condimentum. Praesent gravida magna in aliquet luctus.</p>
<button type="button" class="cta1">AT VERO EROS</button>
</div>
<div class="contentBox2">
<h2>QUIS AUTEM VEL<br> EUM DOLOR</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis feugiat risus nec scelerisque. Sed sagittis magna quis sodales convallis.</p>
</div>
<div class="ImageBox1">
<img src="Assets/img/Header/img1.PNG" alt="img1">
</div>
</div>
</div>
and CSS:
.container {
margin: 0 auto 395px;
width: 1210px;
#include clearfix;
.section1 {
width: 1210px;
position: relative;
img {
width: 100%;
height: 480px;
z-index: -1;
}
.contentBox1 {
position: absolute;
width: 450px;
height: 543px;
background: white;
bottom: -270px;
left: 65px;
z-index: 1;
p.kicker2 {
margin: 80px 0 0 90px;
text-transform: uppercase;
color: $ThemeColor;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
h2 {
margin: 18px 0 32px 90px;
text-transform: uppercase;
font-size: 45px;
font-family: 'Droid Serif', serif;
}
p {
margin: 0 50px 0 90px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: grey;
}
.cta1 {
background: white;
color: black;
font-size: 14px;
font-weight: bold;
justify-content: center;
width: 235px;
height: 60px;
border: 2px solid black;
margin: 37px 0 0 90px;
font-family: 'Open Sans', sans-serif;
&:hover {
cursor: pointer;
background: rgb(233, 233, 233);
}
&:active {
position: relative;
top: 1px;
}
}
}
.contentBox2 {
position: absolute;
width: 270px;
height: 274px;
background: rgb(40, 40, 40);
bottom: -270px;
left: 515px;
z-index: 1;
h2 {
color: $ThemeColor;
margin: 40px 0 18px 37px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
p {
color: rgb(153, 153, 153);
margin: 0 56px 0 37px;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
}
}
.ImageBox1 {
img {
position: absolute;
width: 180px;
height: 182px;
bottom: -270px;
left: 965px;
z-index: 6;
}
}
}
It really drives me crazy. Also, why when I make a media query, for example, for (max-width: 700px), it starts to effect page much sooner, like around 1000px? It's like it's not in sync. This whole responsive layout gives me a headache...
Sorry for a long post...
P.S.
If you wanna see whole code, here's a gitHub reppo: https://github.com/Vukasin90/test

Answer 1

#media screen and (max-width: 770px) {
body {
min-width: 770px; }
body .navigation {
width: 100vh; /* <----- here*/
height: 70px;
background: white;
}
I think this might be an issue. Your navigation width has value in viewheight instead of viewwidth is that intentional?