How can I extend the 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

.header{
    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;

I have already tried this too:

body, html{
    margin:0;
    padding:0;
}

It works perfectly alright for me with whatever code that you have shared - https://react-xukh1h.stackblitz.io May be you have included some css themes or library which might be intruding whatever that you are trying to achieve. — Prakash M., Feb 01 '20 at 21:52
don't repeat the question. Edit the old one if you think the duplicate isn't suitable. Your old question is still visible in the first searching page — Temani Afif, Feb 01 '20 at 23:11
@TemaniAfif I posted again after my first one was unnecessarily closed. The suggested link did not help in my case :) — x89, Feb 01 '20 at 23:37
this is not how the site works. You don't repost the same question if you feel it's *unnecessarily closed*. You edit the question and you vote to reopen it.If it's wrongly closed it will get reopened. Spamming the site with the same question will simply get you banned. — Temani Afif, Feb 01 '20 at 23:45
Just inspect the code in the browser and see which css class/definition is adding the margin. If it is some class from Bootstrap or any other library, then you have to change the precedence of the library import to fix it. — Prakash M., Feb 02 '20 at 02:39

Hasan Sefa Ozalp · Answer 1 · 2020-02-02T00:02:05.090

-1

Just add document.body.style.margin = 0; in your component.

Here is your component with MUI way of styling,

import React from "react";
import { makeStyles } from "@material-ui/styles";
import { Button } from "@material-ui/core";

const useStyles = makeStyles({
  header: {
    background: "green",
    height: "70px",
    width: "100%",
    display: "flex",
    justifyContent: "space-between",
    marginBottom: "25px",
    left: "0",
    right: "0"
  },
  headerRight: {
    float: "right",
    color: "blue"
  }
});

export default function Header() {
  document.body.style.margin = 0;

  const classes = useStyles();
  return (
    <div className={classes.header}>
      <h1>Instaride</h1>
      <div className={classes.headerRight}>
        <Button> Sign In</Button>
        <Button> Contact</Button>
      </div>
    </div>
  );
}

I've also created sandbox for you: https://codesandbox.io/s/serene-sun-n5rth?fontsize=14&hidenavigation=1&theme=dark

edited Feb 02 '20 at 00:02

answered Feb 01 '20 at 22:46

Hasan Sefa Ozalp

6,353
5
34
45

But the css is same, no? It doesn't fix the problem. – x89 Feb 01 '20 at 23:39
My bad, just add `document.body.style.margin = 0;` in your component and it should work all fine. Also edited the post and working sandbox. – Hasan Sefa Ozalp Feb 02 '20 at 00:02
If I use this in const Header() as it, it gives me an error. Is there anyway I Can integrate it in my existing code? If I put it on top of my style sheet, it gives an Unknown word error. – x89 Feb 02 '20 at 00:45
Even by removing the `document.body.style.margin = 0;` in the codesandbox, the header is being displayed perfectly alright. So this cannot be a solution. There has to be some CSS precedence. Unless we get the codesandbox from the questioner, it's difficult to fix it. – Prakash M. Feb 02 '20 at 02:37

score -2 · Answer 2 · answered Feb 01 '20 at 21:45

-2

It works perfectly alright for me with whatever code that you have shared - https://react-xukh1h.stackblitz.io

May be you have included some css themes or library which might be intruding whatever that you are trying to achieve.

answered Feb 01 '20 at 21:45

Prakash M.

479
8
26

How can I extend the header to the full page width?

2 Answers2