Div with 100vw of width doesn't fit to the screen

Question

I have the element <div id="pageFooter"> , and I wanted to make it full width (windows width) so I applied width:100vw , and I didn't wanted it to be fixed/absolute. after applied it, this was the result: the div (footer, at the bottom) is moved slightly to the left.

So I searched online and I got to this Answer. I tried to apply the style and it changed nothing. How Can I fix it?

Minimal working example: (I'm using a little bit of razor, but it doesn't matter for the style. HTML:

    <div class="FooterWrapper lang">
        <footer class="pageFooter">
            <div id="userTools" class="FooterItem">
                <div class="FooterLangSwitcher">
                    <h4>@(Stock_WebApp_v2.Resources.AppCulture.Language)</h4>
                    <hr />
                    @foreach (string value in Stock_WebApp_v2.Resources.LanguagesAvailable.ApplicationLanguages.Split(';'))
                    {
                        <h5 onclick="loc = location.href.split('/');var cul = '@(value.Split(':')[0])';var u = loc[0] + '//' + loc[2] + '/' + cul;for (var x=4;x<loc.length;x++) {u+='/'+loc[x];} window.location.replace(u);">@(value.Split(':')[1])</h5>
                    }
                </div>
            </div>
        </footer>
    </div>

CSS:

.FooterWrapper {
    width: 100vw;
}
.FooterItem {
    color:white;
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
}
body {
    font-family: Arial, sans-serif;
}

Answer 1

add margin 0 on body

body {
    font-family: Arial, sans-serif;
    margin:0;
}

https://jsfiddle.net/moh78sgd/2/

Answer 2

In your case you should apply body { margin:0;} .

To make full width or height an element and fit with screens you need must follow following steps to avoid unexpected situation:

1. Reset your body, html tag CSS properties like html,body { padding:0; margin:0;} html,body { padding:0; margin:0;}
2. To avoid scroll horizontal or vertical with "padding: value" make the element " box-sizing: border-box; "
3. Also make sure your element not positioned with "position: absolute/relative/fixed;" and not leave space by positive or negative value by " top/right/bottom/left:-50px ".

Answer 3

After researching and trying some stuff, I applied

.FooterWrapper {
width: 100%;
display: inline-block;
}

And the result (Note! I added some
to make sure it's not absolute position):

Answer 4

Browsers default style may include automatic margins set to your element's parent(s) which will be added to the whole viewport width thus causing the overflow. You can try to reset the default margin set on an element by adding the CSS rule :

margin: 0;

or by inlining the style attribute directly on your element :

<div style="margin:0;"></div>

EG - resetting margins on the parent body element :

 .FooterWrapper { width: 100vw; } .FooterItem { color: white; margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; } body { font-family: Arial, sans-serif; /* Set body's margin to 0 to ovverride browser defaults */ margin: 0; }

 <div class="FooterWrapper lang"> <footer class="pageFooter"> <div id="userTools" class="FooterItem"> <div class="FooterLangSwitcher"> <h4>@(Stock_WebApp_v2.Resources.AppCulture.Language)</h4> <hr /> @foreach (string value in Stock_WebApp_v2.Resources.LanguagesAvailable.ApplicationLanguages.Split(';')) { <h5 onclick="loc = location.href.split('/');var cul = '@(value.Split(':')[0])';var u = loc[0] + '//' + loc[2] + '/' + cul;for (var x=4;x<loc.length;x++) {u+='/'+loc[x];} window.location.replace(u);">@(value.Split(':')[1])</h5> } </div> </div> </footer> </div>