Remove whitespace above div in react app - html

Question

I have a problem where I have created a header component but there is still whitespace above the header on every page I pull the header component in
this is my entire header component:
import React from 'react';
import { Link } from 'react-router';
import './index.scss';
export default class Header extends React.Component {
render() {
return(
<div className="container">
<ul>
<div className="links">
<li><Link to="quizzes">Quizzes</Link></li>
</div>
<div className="links">
<li><Link to="categories">Categories</Link></li>
</div>
<div className="links">
<li><Link to="create">Create</Link></li>
</div>
</ul>
</div>
)
}
}
and this is my entire css
body {
margin: 0;
}
.container {
margin: 0;
background-color: #bec0c4;
height: 50px;
width: 100%;
}
.container ul{
display: flex;
flex-direction: row;
font-size: 20px;
justify-content: space-between;
list-style-type: none;
width: 90%;
}
I have seen many answers saying to set the margin to 0 but this is still giving me whitespace at the top. if i set margin-top to -20px, it removes it but i dont like this solution

Answer 1

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;
}

Answer 2

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>

Answer 3

I added a margin: 0 to .container ul to and it doesn't leave any whitespace. It was leaving whitespace before over the Header component. Here's a picture of how it looks now.

Answer 4

First check the page using inspect element (Ctrl+shift+I = for google chrome in windows).
Then check if <ul> is consuming the whitespace, then set ul { margin:0; } or for anyother element which is consuming the space. Hope it helps !

Answer 5

In my case, following code snippet worked (Mentioned this in app_directory/src/index.css)
* {
margin-top: 0;
}

Answer 6

You have two ways to get rid of this issue!
One as mentioned by most of the people do 'margin: 0;' or 'margin-top: 0;' to your ul tag or the child you have in your header.
or
Second as mentioned by Bahu, you can go to your index.css or App.css the parent components css files and do this.
* {
margin: 0; /* or margin-top: 0; */
}

Answer 7

If you apply a reset.css on your code, ensure your page loads this reset.css. If you are loading it from the homepage for example -index.js-, and then you open your browser directly on, let's said about_us' page -about_us.js-, then if about.us.js fails to load the reset.css you will have a standard page with all the browser's default styles.
So, always ensure you are loading your reset.css on all your routes to avoid default browsers' page overflowing.