html - Extra right margin shows on website while not add any margin in css

Question

This is my website :https://webfinalproject2020.herokuapp.com

I have read many question about extra right margin in stackoverflow, but still cannot find where cause the extra space in my code, this is my code in html and css.(I cannot paste html code here, please see my repo)

Another problem is that why my background img in section3 don't cover whole page while other sections do. I code them in the same css.

This is the repo : https://github.com/lyl156/webFinalProject

#ch {
  width: 15%;
 }
.jumbotron {
    position: relative;
  }

  .block {
    /* overflow: hidden; */
    position: relative;
    width: 100%;
  }
  
  /* .jumbotron p {
    color: white;
    position: absolute;
    bottom: 0;
    left: 20%;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
  } */
  
  .container-fluid {
    overflow-x: hidden;
  }
  /* .paroller-img {
    max-width: 33%;
    height: auto;
  } */
  
  .section1 {
    position: relative;
    height: 200vh;
    /* background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.125)); */
    background-image: url('../assets/frontpic.png');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* align-items: center; */
    /* justify-content: center; */
  }
  
  /* .section1::before {
    content: '';
    background-image: url('../assets/frontpic.jpg');
    background-size: cover;
    opacity: 0.55;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
  } */
  
  /* .title {
    position: relative;
    top:20%;
    left:5%;
    color: black;
  } */
  
  .titlePic {
    position: relative;
    top:20%;
    left:25%;
    width: 50%;
  }

  .sectionAbstract {
    position: relative;
    height: 100vh;
    background-image: url('../assets/frontpic.png');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

  }
  .sectionPic {
    position: relative;
    top:1%;
    left:45%;
    width: 8%;
  }

  #demo {
    position: relative;
    top:40%;
    left:20%;
    font-size: 200%;
    font-weight:bold;
  }
  #demo2 {
    position: relative;
    top:40%;
    left:16%;
    font-size: 200%;
    font-weight:bold;
  }

  .section1_5 {
    position: relative;
    height: 100vh;
    /* align-items: center; */
    /* justify-content: center; */
  }

  #output {
    position: relative;
    font-size:50px;
    left : 35%;
  }

  .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    margin: 4px 2px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
  }
  .blink_me {
    animation: blinker 1s linear infinite;
  }

  @keyframes blinker {
  50% {
      opacity: 0;
    }
  }

  .section2 {
    height: 100vh;
    /* background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.125)); */
    background-image: url('../assets/section3.png');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* align-items: center; *
    /* justify-content: center; */
  }
  
  .section2 p {
    font-size: 200%;
    position: relative;
  }

  .section3 {
    height: 700vh;
    position: relative;
    /* background: linear-gradient(rgba(0, 0, 0, 0.125), rgba(0, 0, 0, 0.2)); */
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../assets/section3.png');
    background-attachment: fixed;
    /* align-items: center; *
    /* justify-content: center; */
    /* display: flex;
    flex-flow: column wrap;
    align-content: space-between; */
  }
  .section3 p1 {
    /* white-space:pre; */

    font-size: 100%;
    color: black;
    font-weight:bold;
    font-size: large;
    /* border: 2px solid black;
    outline-style: outset;
    outline-color: grey; */
    padding: 3%;
    
    /* width:300px; padding:4px; margin:0 auto;
    background:#ccc;
    border-radius:10px; */

    /* width: 300px;
    height: 100px;  
    padding: 50px;
    border: 1px solid red; */
  }
  .carousel {
    top : -50%; 
    width: 150%;
    height: auto;
  } 
  .section4 {
    height: 100vh;
    position: relative;
    /* background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)); */
    background-repeat: no-repeat;
    background-image: url('../assets/section3.png');
    background-size: cover;
    background-attachment: fixed;
  }
 

  .sectionx {
    height: 150vh;
    align-items: center; 
  }
  .mid {
    position: absolute;
    top : 30%;
    left : 30%;
  }
  .mid2 {
    position: absolute;
    top : 30%;
    left : 50%;

  }
  .onePage {
    position: relative;
    height: 100vh;
  }
  .running {
    top: 50%;
    left: 0;
  }
  .man {
    position: relative;
    max-width: 5%;
    height: auto;
  }
  
  .a {
    width: 5%;
  }

  .left {
    position: absolute;
    top : 12.5%;
    left : 20%;
  }
  .midPerson {
    position: absolute;
    top : 12.5%;
    left : 50%;
  }

  .right {
    position: absolute;
    top : 12.5%;
    left : 80%;
  
  }



  .game1 {
    background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.3));

  }
  .game2 {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));

  }
  .radio {
    transform: scale(1.6);
              margin-right: 10px;
              vertical-align: middle;
              margin-top: -2px;
  }
/* https://projects.verou.me/bubbly/ */
  .speech-bubble {
    position: relative;
    background: wheat;
    border-radius: .4em;
  }
  
  .speech-bubble:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top-color: wheat;
    border-bottom: 0;
    border-left: 0;
    margin-left: -10px;
    margin-bottom: -20px;
  }

Answer 1

等待大神答复