如何将标头扩展到整个页面宽度? [英] How to extend header to the full page width?

问题描述

如何将标题扩展到整个页面?我已经尝试过margin-left&是的，但这是行不通的.

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

Header.css

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

这是我的app.tsx文件:

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;

推荐答案

看起来您的body元素可能有余量.尝试设置:

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

body{
    margin: 0;
}

这篇关于如何将标头扩展到整个页面宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！