导航栏在屏幕上不是全宽？

Question

所以我是 re-creating 我遇到的模板，需要一些帮助...

我希望顶部的导航栏在宽度上覆盖屏幕，但是我目前拥有的代码是将其放入容器中。关于如何在不影响流程的其余部分的情况下执行此操作的任何建议？

     body {
  margin:0;
 }

 .container {
  margin:auto;
  width:80%;
 }

 nav {
  background-color:black;
  color:white;
  font-size:25px;
  height:50px;
  opacity:0.5;

 }

 nav ul {
  margin-top:0;
 }

 nav ul li {
  display:inline;
 }

 nav ul li a {
  padding:30px;
  text-decoration:none;
 }

 nav p {
  margin-top:0;
 }

 .showcase,header {
  background-image:url("space.jpg");
  background-size:cover;
  height:500px;
 }

 @media (max-width: 1800px) {
  
  h1 {
   text-align:left;
  }
  
  nav ul   {
   display:none;
  }
 }

    <!DOCTYPE html>

    <html>

    <head>
     <meta name="viewport" content="width=device-width" />
     <title>Space Prospection</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
 <div class="container"> 
 <div class="showcase">
   
   <nav>
    <a href="#">Space Prospection</a>
    <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Projects</a></li>
     <li><a href="#">Blog</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
   </nav> 

   

   <div class="main_content">
    <h1>Soyuz TMA-M <span>Spacecraft</span></h1>
    <button>Read More</button>
   </div>
   
   <div class="secondary_content">
    <h1>Featured Projects</h1>
    
   </div>
  
  </div>
 </div>
  
 </div>
 
    </body>

    </html>

提前致谢

Answer 1

.container 应位于 <nav> 内容内，或网站内的任何内容，因此这是您的代码：

HTML:

<div class="showcase">
        <nav>
        <div class="container"> 
            <a href="#">Space Prospection</a>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        </nav>  


    <div class="container"> 

        <div class="main_content">
            <h1>Soyuz TMA-M <span>Spacecraft</span></h1>
            <button>Read More</button>
        </div>

        <div class="secondary_content">
            <h1>Featured Projects</h1>

        </div>

    </div>
</div>

.container 可以将所有网站内容保存为相同宽度但不是所有背景

Answer 2

好吧，您只需将菜单放在 div.container 之外。如果你想要一个 max-width 用于你的 headers 内容，你可以在里面有另一个包装器。

body {
    margin: 0;
    background-image:url("https://picsum.photos/1600/900");
    background-size: cover;
    min-height: 100vh;
}

.container {
    margin: auto;
    max-width: 800px;
}

nav {
    background-color: black;
    color: #FFF;
    font-size: 25px;
    opacity: 0.5;
}

nav .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

nav ul {
    margin:0;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    text-decoration:none;
    display: block;
    color: #FFF;
}

nav p {
    margin-top: 0;
}

.showcase, header {
    background-image:url("https://picsum.photos/1600/900");
    background-size:cover;
    height:500px;
}

@media (max-width: 1800px) {

    h1 {
        text-align:left;
    }

    nav ul   {
        display:none;
    }
}

<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title>Space Prospection</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles.css" />
</head>

<body>

<nav>
  <div class="container"> 
      <a href="#">Space Prospection</a>
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </div>
</nav>  

<div class="container"> 

          <main class="main_content">
              <h1>Soyuz TMA-M <span>Spacecraft</span></h1>
              <button>Read More</button>
          </main>

          <aside class="secondary_content">
              <h1>Featured Projects</h1>

          </aside>

</div>

</body>

</html>

导航栏在屏幕上不是全宽？

Nav bar not full width on screen?

html

css

nav