Margin white-space

Question

I was modifying a page and out of no where white-space started showing on it. It is making the page wider than 100% width in my mobile media query (anything from 640px down. It looks like this:

The only thing I changed in my main desktop view is:

 #see-all-services-text {
    opacity: 0;
    font-size: 1.3em;
    position: relative;
    left: -30%;
}

I changed left: -30%; from left: -20%;

and then I widened the blue-text area within my main desktop view as well.

The thing is within the developer inspect tool, I do not see anything that is showing exceeding the 100% width. Sorry for this being a pretty broad question. I just don't see the area in which is causing this to be able to fix it, so any insight of something I over-looked would be amazing.

Answer 1

Because you have child elements animating in and out of the .blue wrapper, it pushes element width further than the body. You can fix this by adding

.blue {
   overflow: hidden;
}