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

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

Why does Go error when trying to marshal this JSON? -