Remove whitespace above div in react app

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

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 2

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.