Javascript 如何将页眉扩展到整页宽度？

如何将标题扩展到整页？我试过左边和右边空白，但都不起作用

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

这是我的app.tsx文件：

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

export default Header;

---

无论你共享了什么代码，我都能很好地使用它-

可能是您包含了一些css主题或库，这些主题或库可能会干扰您试图实现的任何目标。

只需添加document.body.style.margin=0；在您的组件中

这是您的组件，采用MUI风格

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

---

我还为您创建了沙盒：

这段代码有什么问题，结果是什么？无论你共享了什么代码，它对我都非常有效-可能是你包含了一些css主题或库，它们可能会侵入你试图实现的任何东西。它对我也非常有效…不要重复这个问题。如果您认为副本不合适，请编辑旧版本。您的旧问题在第一次搜索中仍然可见page@TemaniAfif在我的第一个网站被不必要地关闭后，我又发布了一次。建议的链接对我的情况没有帮助：但是css是一样的，不是吗？这并不能解决问题。我的问题是，只需添加document.body.style.margin=0；在您的组件中，它应该可以正常工作。还编辑了帖子和工作沙盒。如果我在const Header中使用它，它会给我一个错误。我是否可以将其集成到现有代码中？如果我把它放在样式表的顶部，它会给出一个未知单词错误；在codesandbox中，标题显示得非常好。因此，这不是一个解决方案。必须有一些CSS优先权。除非我们从提问者那里得到代码沙盒，否则很难修复它。

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