CODEWITHSUNDEEP
htmlcssnavigationhtml-listsnavigationbar
inthenameofmusik
inthenameofmusik

Reputation: 623

Can't figure out extra space in my ul - simple html

I'm trying to really understand where the extra 40 pixels of padding on the left side of my ul is coming from. I'd like to understand this rather than slouch it off. Sorry if I'm overlooking something simple, thank you.

https://jsfiddle.net/inthenameofmusik/2bayjo20/

Even if you add this, it still shows that padding on the leftmost li.

.navigation-gl ul li {
    float: left;
}

Upvotes: 2

Views: 134

Answers (2)

kpearlkmanic
kpearlkmanic

Reputation: 84

Set padding-left of ul tag to 0

.navigation-gl ul {
border: 1px dotted red;
float: left;
list-style-type: none;
padding-left: 0;
text-align: left;
}

Upvotes: 0

codingrose
codingrose

Reputation: 15699

It is the default styling that browser appends.

You can write:

.navigation-gl ul{
    padding:0
}

to remove space.

Please note, the default styling is dependent on the browser.

It is better to reset/normalize your css to prevent from such browser's default styling.

Upvotes: 2

Related Questions