How to extend header to the full page width? [dupl

问题:

This question already has answers here:

Removing body margin in CSS (10 answers)

Closed 3 months ago.

How can I extend my header to the full page? I have tried margin-left & right but that doesn't work.

Header.css

    background: green;
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    left: 0;
    right: 0;
} 


  .header-right {
    float: right;
  }

  @media screen and (max-width: 500px) {
    .header-right {
      float: none;
    }
  }

Here's my app.tsx file:

const Header = () => (
  <div className = 'header'>
  <h1>Instaride</h1>
  <div className="header-right">
    <Button> Sign In</Button>
    <Button> Contact</Button>
  </div>
</div>
);

export default Header;

回答1:

Looks like there could be a margin for your body element. Try setting:

body{
    margin: 0;
}