My website page jumps up and down on scroll

I am developing a website, and somewhere along the line the page jumps up and down on scroll when ever I am viewing it on a tablet or phone. As far as I can tell all my rows are in containers, and there is nothing in my css that would cause this. I also checked my JS using a lint checker. Does anyone have a general solution to the problem and has ran into this before?

my website testing area url

.type{
 padding-top: 5em;
 margin-left: 3.125em;
}

.type h1{
  color: white;
  font-family: 'Chivo', sans-serif;
  font-size: 70px;
  display: inline;
  line-height: 1em;
}

.typewriter__clip {
color: white;
font-family: 'Domine', serif;
position: relative;
display: inline-block;
overflow: hidden;
padding-left: 6px;
border-right: 6px solid #ed2024;
margin-left: 0.5em;
margin-bottom: -1em;
}

.typewriter__clip p {
display: inline-block;
position: absolute;
font-size: 54px!important;
top: 0;
left: 0;
line-height: 65px;
letter-spacing: -1px;
white-space: nowrap;
}

.typewriter__clip p.u-visible {
position: relative;
}

.u-invisible {
opacity: 0;
}

.u-visible {
opacity: 1;
}

/*Media Screen*//*Media Screen*//*Media Screen*/
/*Media Screen*//*Media Screen*//*Media Screen*/
/*Media Screen*//*Media Screen*//*Media Screen*/

@media only screen and (max-width: 1024px){
/*Tablets & Desktop*/
.et_pb_fullwidth_header_scroll{
padding: 0;
min-height: 0px;
}
.et_pb_fullwidth_header_container{
margin-right: 0;
}
#main-header{
background-color: white;
top: 0;
bottom: auto;
position: fixed;
}
#main-header a{
color: black;
}
.type{
margin-left: -1em;
}
.type h1{
font-size: 55px!important;
}
.typewriter__clip{
margin-left: .2em;
}
.typewriter__clip p {
font-size: 35px!important;
}
}

@media only screen and (max-width: 767px) {
/* phones */
.et_pb_section_0{
  -webkit-transition: background 0.6s ease-in-out;
  -moz-transition: background 0.6s ease-in-out;
  -o-transition: background 0.6s ease-in-out;
  transition: background 0.6s ease-in-out;
}
.type h1{
  display: none;
}
.phoneHeading{
  display: block;
}
.phoneHeading h2{
  font-size: 50px;
  font-weight: 900;
  line-height: 1;
  color:white;
  font-family: 'Chivo', sans-serif;
}
.phoneHeading p{
  font-size: 50px;
  line-height: 1;
  color: white;
  font-family: 'Domine', serif;
}
}