My width is bigger than my screen, but body and html are set to 0 padding and margin and 100% width

Question

After removing bootstrap I've run into this issue with the width of my page being larger than the screen, and having a horizontal scroll bar as a result. I thought setting body, html to 0 padding and margin as well as 100% width would be okay but the issue persists..

SOLUTION EDIT: I had images that were wider than the view, so I needed to set box-sizing: border-box to contain the images in the parent. Then I inherited this for all elements. So now the top of my CSS is:

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

* {
    box-sizing: inherit;
}

html:

@{
    ViewBag.Title = "Home Page";
}
<div class="main">
    <div class="content">
        <div id="welcome" class="page">
            <h1>asasd</h1>
            <p>
                test3
            </p>
        </div>
        <div id="asdasd" class="page" data-original="/Images/asdh.jpg">
            <h1>asdasd</h1>
            <p>
                test2
            </p>
            <div class="vfd"></div>
            <div class="measurment"></div>
        </div>
        <div id="test2" class="page" data-original="/Images/test.jpg">
            <h1></h1>
            <p>test
            </p>
        </div>
    </div>
</div>

CSS:

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    height: 300vh;
}

.page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    padding-left: 25%;
    padding-right: 25%;
}

Answer 1

Are your images what is making your screen width overflow? You can always use box-sizing to help with clearing margins and padding: https://css-tricks.com/box-sizing/

Answer 2

Use box-sizing: border-box; so your padding are included into width. Otherwise, your real width is 100% + 25% + 25% = 150%.

CSS3 box-sizing Property

content-box Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

border-box The width and height properties (and min/max properties) includes content, padding and border, but not the margin

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.main {
    width: 100%;
    height: 100%;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    height: 300vh;
}

.page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    position: relative;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 18px;
    padding-left: 25%;
    padding-right: 25%;
    box-sizing: border-box;
}

<div class="main">
    <div class="content">
        <div id="welcome" class="page">
            <h1>asasd</h1>
            <p>
                test3
            </p>
        </div>
        <div id="asdasd" class="page" data-original="/Images/asdh.jpg">
            <h1>asdasd</h1>
            <p>
                test2
            </p>
            <div class="vfd"></div>
            <div class="measurment"></div>
        </div>
        <div id="test2" class="page" data-original="/Images/test.jpg">
            <h1></h1>
            <p>test
            </p>
        </div>
    </div>
</div>