html - Why is this page wider than the display? -
i'm working on personal website, , i've run problem: after using css , container center list, page wider display causing horizontal scrollbar. why this? 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, navbar should compress , text should wrap, right? why isn't working?
you need remove margin
css body
tag:
body { // margin: 0 2em 0 2em; <-- remove font-size: 18px; width: 100%; } div.main { margin: 0 2em 0 2em; }
wrap content in container-fluid
instead:
<div class="container-fluid main"> <nav class="navbar navbar-default"> <!-- nav --> </nav> </div>
Comments
Post a Comment