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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
Why is this green square taking some of the space from the whole UL element?
CodePudding user response：
<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.
CodePudding user response：
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 :)
