How to extend header to the full page width? [duplicate]

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
– evolon

2020-02-01 20:48:30 +00:00
Commented Feb 1, 2020 at 20:48 — evolon
– evolon, Commented Feb 1, 2020 at 20:48

Omar Farrah · Accepted Answer · 2020-02-01 20:52:25Z

1

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

body{
    margin: 0;
}

answered Feb 1, 2020 at 20:52

Omar Farrah

112 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

x89 Over a year ago

I tried this in the header but it doesn't work.

Omar Farrah Over a year ago

Any chance you could post the html?

x89 Over a year ago

See the updated qs

Omar Farrah Over a year ago

For html classes the correct syntax is <div class=' className '> rather than <div className = ' ' > Not sure if this is related to the problem

x89 Over a year ago

This is react. React only has classNames and not class

|

Collectives™ on Stack Overflow

How to extend header to the full page width? [duplicate]

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related