0

ul green space As you can see on the image, this is a simple navbar:

.upper-center {
     display: flex;
     flex-direction: row;
     justify-content: space-around;
}
<ul class="upper-center">
   <li><a>News</a></li>
   <li><a>Solutions</a></li>
   <li><a>Forum</a></li>
   <li><a>Contact</a></li>
</ul>

Why is this green square taking some of the space from the whole UL element?

deepakchethan
  • 5,240
  • 1
  • 23
  • 33
Gonzalo
  • 353
  • 2
  • 16

2 Answers2

3

<ul> elements come with some inherent styling in the browser. If you set padding: 0 on your <ul> in your css, you'll see that the green bar will be removed.

Dan Zuzevich
  • 3,651
  • 3
  • 26
  • 39
1
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
--> padding-inline-start: 40px;
}

those are default UL styles, you need to override padding-inline-start :)

spaceholder
  • 131
  • 1
  • 2
  • 9