Width: 100% Without Scrollbars

Because you're using position: absolute, instead of using:

width: 100%; margin-right: 10px; margin-left: 10px

you should use:

left: 10px; right: 10px

That will make your element take the full width available, with 10px space on the left and right.

CSS 100% width but avoid scrollbar

Use overflow: scroll instead of overflow: auto - that'll force a scrollbar to always appear.

width 100% causes horizontal scrollbar

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">    <a href="#mainPageDropdownMenu"> </a>    <div>      <div>        <a href="#"> </a>      </div>
      <div>        <a href="#"> </a>      </div>      <div>        <a href="#"> </a>      </div>
      <div>        <a href=""> </a>      </div>    </div>  </li>  <li>    <a href="#aboutMe"> </a>  </li>  <li>    <a href="#contactUS"> </a>  </li></ul>

<img src="http://ghmahdi.ir/wp-content/uploads/header.jpg" id="headerImage">
<div id="wrapper">  <div id="aboutMe" class="modalLayout">    <div>      <a href="#" class="closeBtn"> × </a>    </div>    <div class="modal"></div>  </div>
  <div id="contactUS" class="modalLayout">    <div>      <a href="#" class="closeBtn"> × </a>    </div>    <div class="modal"></div>  </div>
  <div class="mainMenu">    <div> <a href="#aboutModal"></a></div>    <div><a href=""></a></div>    <div><a href=""></a></div>    <div><a href=""></a></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>

Best solution to remove horizontal scrollbar with img width of 100vw?

The horizontal scroll had come up because this is only an issue on windows. On Mac or Android the scrollbars are placed on top of the content and disappear once you're done scrolling so they don't affect the view width.

If max-width: 100% is the width of the viewport without scrollbars, then you didn't need 100vw in the first place.

You could just have use width: 100% because the element doesn't have any positioned ancestor, so its reference is the body.

A simple solution in your case is by giving max-width: 100%.

HTML would be like:

<div class="box">
    .
    .
    .
</div>

Use this CSS:

html, body {
    margin: 0;
    padding: 0
}
    .box {
        width: 100vw;
        max-width:100%; // This is very Important.
        height: 100vh;
    }

bootstrap row 100% width without horizontal scroll and adaptive on each size

You can use this:

    @media (min-width: 768px)
      .container {
         max-width: 100%;
    }

This will overwrite the original max-width that is now in play. Just to be sure, you can put there the same css code without the media query, so it will work on all screen resolutions.

How to set 100 % height without having a vertical scrollbar?

Be aware that percentual heights refer to the height of the parent.
You can use calc() to solve your issue:

#__next{
    height: calc(100% - navbarpx);
    ...
}

calc()

For the padding issue you can look into border-box.

Width: 100% Without Scrollbars