100% Width Bg Images Not Extending on Horizontal Scroll

Image width 100%, no horizontal scroll

The overflow needs to be applied to the container element, not the element itself. For example:

.header-image-inner{
    overflow: hidden;
}

.header-image-inner img {
    width: 100%;
}

100% width images on horizontal scrolling page

HTML will do the scrolling and the image width for you if you let it.

Demo: http://jsfiddle.net/ThinkingStiff/sVa7S/

HTML:

<div id="scroll">
       <img src="http://thinkingstiff.com/images/priorities.png" /><!--
    --><img src="http://thinkingstiff.com/images/priorities.png" />
</div>

CSS:

#scroll {
    height: 100%;
    overflow-x: scroll;    
    white-space: nowrap;
    width: 100%;
}

#scroll img {
    height: 100%;
    vertical-align: top;
}

Preventing horizontal scrolling after a certain width

The way to do it here is to:

Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.

Move these rules from body to #wrapper:

margin: 0 auto;
position: relative;
width: 960px;

Add this new CSS:

body {
    min-width: 960px;
    overflow: hidden;
}

Add this to get horizontal scrolling back when the window is less than 960px wide:
```
html {
    overflow: auto;
}
```

Here's a live demo so you can quickly see if my answer will have the desired effect.

Tested in Firefox, Chrome, IE8.

Fixed background image with full window stretch and fit with no repeating when scrolling?

object-fit

https://css-tricks.com/almanac/properties/o/object-fit/

it's the best choice for you that can stretch and fit 100%

.object-fit_fill { object-fit: fill }
.object-fit_contain { object-fit: contain }
.object-fit_cover { object-fit: cover }
.object-fit_none { object-fit: none }
.object-fit_scale-down { object-fit: scale-down }

https://jsfiddle.net/y3cobhp1/

& what you looking for exactly below

    .object-fit_fill { object-fit: fill }
OR
    .object-fit_cover { object-fit: cover }

https://jsfiddle.net/y3cobhp1/1/

horizontal scroll with 100% width on grid cell

If your grid potentially contains overflowing content, you cannot work with 1fr, here's why:

1fr is just short for minmax(auto, 1fr).
minmax(a, b) becomes a (without any minmax) when a >= b is true.
So in your case your grid behaves as if you had defined it as grid-template-columns: auto 1fr;, because auto is larger than 1fr for your first column.

To fix that, you need to tell your grid that it isn't allowed to extend the cells when content becomes too wide.

Use minmax(0, 1fr) instead of 1fr:

* {
  margin: 0;
  padding: 0;
}

body {
  padding: 50px;
}

h2 {
  font-size: 2em;
  white-space: nowrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 800px;
  gap: 20px;
}

.box {
  background-color: #e74c3c;
  height: 30vh;
}

h2 {
  background-color: #bdc3c7;
  overflow-x: scroll;
}

<div class=grid>

  <div>
    <h2>long title, i can scroll------------------ - - - - ----</h2>
    <div class="box"></div>
  </div>

  <div>
    <h2>Short title</h2>
    <div class="box"></div>
  </div>

</div>

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>

CSS footer width:100% causes horizontal scroll

As @Lal mentioned the problem is caused by the left padding on .footer.

I'm assuming this padding is a necessary part of your design so a better solution would be to set the box-sizing property of your footer to border-box:

.footer {
    padding-left:5% 
    box-sizing: border-box;
}

DEMO

Edit

Ok try this: