Webpage not 100% Width

Question

I have a one page website. My problem is that at the right hand side, there is about a 15px margin. The widths of my body and div's are set to 100%. I also have to scroll slightly at the bottom of my page. This issue is relevant on all screen sizes. How can I fix this? I'm not sure which css and html code to highlight so I will attach just the code relevant to the main top as all other sections (like about or contact) should have the same solution...

Here's an image of the issue I am currently facing.

HTML:

<div id="main-top" class="main-top">
    <div class="main-content">
        <div class="container content">
            <div class="row text-center">
                <h2>
                    LORUM IPSUM
                    <div class="words words-1">
                        <span>Lorum Ipsum 1</span>
                        <span>Lorum Ipsum 2</span>
                        <span>Lorum Ipsum 3</span>
                    </div>
                </h2>
            </div>
         </div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
    width: 100%;
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    background-color: #FFF !important;
    line-height: 1.5;
    letter-spacing: 0.1em;
}

.main-top {
    position: relative;
    width: 100%;
    height: 100%;
}

.main-top .main-content {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: table;
}

Answer 1

add this

 Html, body 
{
    max-width: 100%
    overflow-x: hidden;
 }

hope this will solve your problem.