Bootstrap makes margin to ul

Question

I am wondering why Bootstrap adds an "margin" to my ul.

Without:

With:

<!-- HEADER -->
<div class="header">
    <div class="container">

        <ul class="list-group">
            <li class=""><a href="#start">CompanyX.com</a></li>

            <li class="right"><a href="#logout"><i class="fa fa-sign-out"></i></a></li>
            <li class="right"><a href="#money">Hey: Peter G.</a></li>
        </ul>
    </div>
</div>

CSS: https://hastebin.com/uqawiwuyer.css

Hope that somebody could help me.

Answer 1

It's actually not a Bootstrap thing but default browser specific styling. Each browser adds default styles to specific elements and at least Chrome, Firefox, and Sarafi all add 40px of padding-left to all <ul> elements.

Not sure the reasoning behind it but a hunch is that the browser is trying to add some visual space to a list.

A CSS normalizer will resolve some of the default styling. Bootstrap already includes one but it doesn't defacto remove the ul spacing so just add the following code at the bottom at the bottom of the bootstrap.css file.

ul {
  margin: 0; 
  padding:0
}