width 100% causes horizontal scrollbar - html

Question

I've created a page with HTML and CSS, the problem is horizontal scrollbar is showing up although as far as I've checked there is no element with width over 100% or inappropriate padding or margin.
here is the complete HTML and CSS code: https://jsfiddle.net/m11nsbag/9/
#keyframes modalAnimation {
from {
top: 90vh;
}
to {
top: 95vh;
background-color: darkcyan;
box-shadow: 5px 5px 25px #747474;
}
}
#headerImage {
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
padding: 0px;
margin: 0px;
z-index: -10000000;
}
#main-nav>li {
width: 9vw;
height: 7vh;
color: #ffffff;
float: right;
text-align: center;
line-height: 7vh;
margin: 0px;
font-size: medium;
z-index: 100;
list-style-type: none;
transition: 0.25s;
}
#main-nav {
background-color: rgba(245, 255, 249, 0.5);
width: 100%;
height: 7vh;
position: fixed;
z-index: 100;
float: right;
transition: all 0.25s;
}
/*
#main-nav:hover {
background-color: rgba(0,129,129,1);
} */
#main-nav>li:hover {
background-color: rgb(232, 255, 92);
}
#wall {
background-color: #d2d2d2;
width: 100%;
height: 100vh;
z-index: -10;
}
* {
margin: 0px;
padding: 0px;
}
#main-nav>li>a {
color: #000;
text-decoration: none;
}
.modalLayout {
opacity: 0;
}
.modalLayout:target {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
width: 100vw;
height: 100vh;
opacity: 1;
transition: all 0.4s;
z-index: 200;
}
.modal {
text-align: center;
padding: 6% 1% 1.7% 1%;
width: 30vw;
height: 20vh;
margin: 30vh 35vw;
background-color: crimson;
position: fixed;
transition: all 0.4s;
z-index: 10;
border-radius: 10px;
box-shadow: 2px 2px #484848;
}
.closeBtn {
font-size: 35px;
position: absolute;
top: 25vh;
right: 33vw;
float: right;
color: #fff;
font-weight: bold;
text-decoration: none;
z-index: 1000;
cursor: pointer;
margin-right: 5px;
transition: all 0.4s;
}
.mainPageButton>div {
display: none;
}
.mainPageButton:hover>div {
display: block;
transition: all 0.25s;
}
.mainPageButton>div>div {
width: 15vw;
height: 8vh;
background-color: #d2d2d2;
color: #000;
font-size: medium;
float: top;
border-bottom: black 1px solid;
list-style-type: none;
position: relative;
line-height: 8vh;
}
.mainPageButton>div>div>a {
text-decoration: none;
color: #fff;
font-size: medium;
text-align: center;
list-style-type: none;
background-color: #d2d2d2;
padding-right: 2px;
}
.mainMenu {
position: absolute;
top: 88vh;
z-index: 0;
margin-right: 1vw;
}
.mainMenu>div {
width: 15vw;
height: 10vh;
border-bottom: black solid 2px;
margin-bottom: 3vh;
background-color: white;
transition: all .3s;
text-align: center;
line-height: 10vh;
}
.mainMenu>div:hover {
width: 17vw;
height: 12vh;
background-color: #ffcfce;
}
.mainMenu>div>a {
font-size: x-large;
color: #000;
cursor: pointer;
text-decoration: none;
}
.about {
width: 20vw;
height: 40vh;
background-color: #94ffca;
border-radius: 5px;
position: absolute;
top: 88vh;
left: 0;
float: left;
font-size: larger;
padding: 1vw;
transition: all 0.3s;
margin-left: 4px;
overflow: auto;
}
.about:hover {
transform: translate(5px);
background-color: rgba(148, 255, 202, 0.5);
}
#modalcontainer {
background-color: rgba(256, 256, 256, 0.75);
top: 80vh;
position: absolute;
width: 100vw;
height: 200%;
z-index: -10;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
#modalswall {
width: 50vw;
height: 150vh;
background-color: #0d213c;
position: absolute;
top: 85vh;
right: 20vw;
z-index: -5;
border-radius: 8px;
box-shadow: 20px 20px 25px grey;
filter: opacity(90%);
}
.bodyModals {
background-color: #acd7ff;
top: 90vh;
width: 35vw;
height: 25vh;
right: 28vw;
position: relative;
z-index: 5;
border-radius: 10px;
transition: all .5s;
margin-bottom: 10vh;
}
.bodyModals:hover {
-webkit-animation: modalAnimation;
-webkit-animation-duration: 3s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
}
.bodyModals>p {
padding: 1vw;
font-size: large;
}
#wrapper {
margin-bottom: 170vh;
position: relative;
}
#footer {
position: relative;
width: 100vw;
min-height: 25vh;
bottom: 0;
background-color: #0d213c;
}
#footer>p {
font-size: large;
text-align: center;
color: #fff;
padding: 10px 0px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
I think there maybe a padding or margin which I'm overlooking but I've been looking at it for several hours and tried almost anything.
thanks for your sincere help.
Update: I changed all the 100vw with 100% and the problem was fixed.

Answer 1

Vertical scrollbars are included in vw units.
So when there's a vertical scrollbar, 100vw is wider than the viewport (without scrollbars).
One suggestion is to change #modalcontainer to width:100% instead of width:100vw.
#keyframes modalAnimation {
from {
top: 90vh;
}
to {
top: 95vh;
background-color: darkcyan;
box-shadow: 5px 5px 25px #747474;
}
}
#headerImage {
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
padding: 0px;
margin: 0px;
z-index: -10000000;
}
#main-nav>li {
width: 9vw;
height: 7vh;
color: #ffffff;
float: right;
text-align: center;
line-height: 7vh;
margin: 0px;
font-size: medium;
z-index: 100;
list-style-type: none;
transition: 0.25s;
}
#main-nav {
background-color: rgba(245, 255, 249, 0.5);
width: 50%;
height: 7vh;
position: fixed;
z-index: 100;
float: right;
transition: all 0.25s;
}
/*
#main-nav:hover {
background-color: rgba(0,129,129,1);
} */
#main-nav>li:hover {
background-color: rgb(232, 255, 92);
}
#wall {
background-color: #d2d2d2;
width: 50%;
height: 100vh;
z-index: -10;
}
* {
margin: 0px;
padding: 0px;
}
#main-nav>li>a {
color: #000;
text-decoration: none;
}
.modalLayout {
opacity: 0;
}
.modalLayout:target {
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
width: 100vw;
height: 100vh;
opacity: 1;
transition: all 0.4s;
z-index: 200;
}
.modal {
text-align: center;
padding: 6% 1% 1.7% 1%;
width: 30vw;
height: 20vh;
margin: 30vh 35vw;
background-color: crimson;
position: fixed;
transition: all 0.4s;
z-index: 10;
border-radius: 10px;
box-shadow: 2px 2px #484848;
}
.closeBtn {
font-size: 35px;
position: absolute;
top: 25vh;
right: 33vw;
float: right;
color: #fff;
font-weight: bold;
text-decoration: none;
z-index: 1000;
cursor: pointer;
margin-right: 5px;
transition: all 0.4s;
}
.mainPageButton>div {
display: none;
}
.mainPageButton:hover>div {
display: block;
transition: all 0.25s;
}
.mainPageButton>div>div {
width: 15vw;
height: 8vh;
background-color: #d2d2d2;
color: #000;
font-size: medium;
float: top;
border-bottom: black 1px solid;
list-style-type: none;
position: relative;
line-height: 8vh;
}
.mainPageButton>div>div>a {
text-decoration: none;
color: #fff;
font-size: medium;
text-align: center;
list-style-type: none;
background-color: #d2d2d2;
padding-right: 2px;
}
.mainMenu {
position: absolute;
top: 88vh;
z-index: 0;
margin-right: 1vw;
}
.mainMenu>div {
width: 15vw;
height: 10vh;
border-bottom: black solid 2px;
margin-bottom: 3vh;
background-color: white;
transition: all .3s;
text-align: center;
line-height: 10vh;
}
.mainMenu>div:hover {
width: 17vw;
height: 12vh;
background-color: #ffcfce;
}
.mainMenu>div>a {
font-size: x-large;
color: #000;
cursor: pointer;
text-decoration: none;
}
.about {
width: 20vw;
height: 40vh;
background-color: #94ffca;
border-radius: 5px;
position: absolute;
top: 88vh;
left: 0;
float: left;
font-size: larger;
padding: 1vw;
transition: all 0.3s;
margin-left: 4px;
overflow: auto;
}
.about:hover {
transform: translate(5px);
background-color: rgba(148, 255, 202, 0.5);
}
#modalcontainer {
background-color: rgba(256, 256, 256, 0.75);
top: 80vh;
position: absolute;
width: 100%;
height: 200%;
z-index: -10;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}
#modalswall {
width: 50vw;
height: 150vh;
background-color: #0d213c;
position: absolute;
top: 85vh;
right: 20vw;
z-index: -5;
border-radius: 8px;
box-shadow: 20px 20px 25px grey;
filter: opacity(90%);
}
.bodyModals {
background-color: #acd7ff;
top: 90vh;
width: 35vw;
height: 25vh;
right: 28vw;
position: relative;
z-index: 5;
border-radius: 10px;
transition: all .5s;
margin-bottom: 10vh;
}
.bodyModals:hover {
-webkit-animation: modalAnimation;
-webkit-animation-duration: 3s;
-webkit-animation-direction: alternate;
-webkit-animation-iteration-count: infinite;
}
.bodyModals>p {
padding: 1vw;
font-size: large;
}
#wrapper {
margin-bottom: 170vh;
position: relative;
}
#footer {
position: relative;
width: 50vw;
min-height: 25vh;
bottom: 0;
background-color: #0d213c;
}
#footer>p {
font-size: large;
text-align: center;
color: #fff;
padding: 10px 0px;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<ul id="main-nav">
<li class="mainPageButton">
<div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</li>
<li>
</li>
<li>
</li>
</ul>
<img src="http://ghmahdi.ir/wp-content/uploads/header.jpg" id="headerImage">
<div id="wrapper">
<div id="aboutMe" class="modalLayout">
<div>
×
</div>
<div class="modal"></div>
</div>
<div id="contactUS" class="modalLayout">
<div>
×
</div>
<div class="modal"></div>
</div>
<div class="mainMenu">
<div> </div>
<div></div>
<div></div>
<div></div>
</div>
<div class="about"></div>
<div id="modalswall"></div>
<div class="bodyModals"> </div>
<div class="bodyModals"></div>
<div class="bodyModals"></div>
<div id="modalcontainer"> </div>
</div>
<div id="footer">
</div>
For interest, also see:
Bug 133271
viewport units in case of 'overflow:auto'