VirtualDXS VirtualDXS - 7 months ago 23
HTML Question

Why is this page wider than the display?

I'm working on a personal website, and I've run into a problem: After using CSS and a container to center my list, the page is wider than the display causing a horizontal scrollbar. Why is this? The relevant code:

HTML:

<h2>My Stack:</h2>
<div class="list">
<ul class="list-unstyled">
<li>Vim</li>
<li>Git</li>
<li>Zsh</li>
<li>Byobu</li>
</ul>
</div>


CSS:

body {
margin: 0 2em 0 2em;
font-size: 18px;
width: 100%;
}
h1, h2, h3, h4, h5, h6, h7 {
text-align: center;
}
p, div.list{
text-align: center;
}
ul {
display: inline-block;
}


Live copy: https://www.k7dxs.xyz/linux.php

Theoretically, the navbar should compress and the text should wrap, right? Why isn't it working?

Answer

You need to remove the margin CSS from the body tag:

body {
    // margin: 0 2em 0 2em; <-- remove this
    font-size: 18px;
    width: 100%;
}

Wrap you content in the container-fluid instead:

<div class="container-fluid">
    <nav class="navbar navbar-default">
        <!-- the nav -->
    </nav>
</div>
Comments