How to extend header to the full page width?

Question

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;

Can you share your container CSS code? – evolon Feb 01 '20 at 20:48 — evolon, Feb 01 '20 at 20:48

score 1 · Answer 1 · answered Feb 01 '20 at 20:52

1

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

body{
    margin: 0;
}

answered Feb 01 '20 at 20:52

Omar Farrah

11
2

I tried this in the header but it doesn't work. – x89 Feb 01 '20 at 20:53
Any chance you could post the html? – Omar Farrah Feb 01 '20 at 20:54
See the updated qs – x89 Feb 01 '20 at 20:55
For html classes the correct syntax is
rather than
Not sure if this is related to the problem
– Omar Farrah Feb 01 '20 at 21:06
This is react. React only has classNames and not class – x89 Feb 01 '20 at 21:07
This could be helpful: https://stackoverflow.com/questions/46151515/react-bootstrap-causing-margins-on-left-and-right-side – Omar Farrah Feb 01 '20 at 21:10

How to extend header to the full page width?

1 Answers1

Linked

Related