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

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