Remove whitespace above div in react app
Most browsers (eg. Chrome) come with a default set of rules (user agent stylesheet) and set rules like margin in ul's, so you likely have a margin-top (-webkit-margin-before: 1em;) set to your ul.
Set margin-top: 0 on the ul will remove the space:
ul {
margin-top: 0;
}
I've set the margin for ul to zero (and included padding to force a default reset). Let me know if this meets your requirements.
You may want to have a look at tools like normalize.css for future use.
body {background-color: red;}
body, ul {
margin: 0;
padding: 0;
}
.container {
background-color: #bec0c4;
height: 50px;
width: 100%;
}
.container ul {
display: flex;
flex-direction: row;
font-size: 20px;
justify-content: space-between;
align-items: center;
list-style-type: none;
width: 90%;
height: 100%;
}<div class="container">
<ul>
<div class="links">
<li>
<a>Quizzes</a>
</li>
</div>
<div class="links">
<li>
<a>Categories</a>
</li>
</div>
<div class="links">
<li>
<a>Create</a>
</li>
</div>
</ul>
</div>