How to color navbar with width 100% while inside bootstrap container-CodePudding

I have this code https://jsfiddle.net/kxrmcpzn/

<!DOCTYPE html>
<html  lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Landing Page</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <!-- Place favicon.ico in the root directory -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>
  <style type="text/css" media="screen">
    .flex-even {
      flex: 1;
    }

    .hero,
    .navbar {
      background-color: #1f2937;
      color: #f9faf8;
    }
  </style>

  <body>
    <div >
      <div >
        <div >Header Logo</div>
        <div >
          <a href="#">header link one</a>
          <a href="#">header link two</a>
          <a href="#">header link three</a>
        </div>
      </div>

      <div >
        <div >
          <h1>This website is awesome</h1>
          <p>
            This website has some subtext that goes here under the main title.
            It's a smaller font and the color is lower contrast
          </p>
          <button >Sign up</button>
        </div>
        <div >
          <img src="https://via.placeholder.com/350x150" />
        </div>
      </div>

      <div>
        <h2 >Some random information</h2>
        <div >
          <div>
            <img src="https://via.placeholder.com/150" alt="" />
            <p>this is some subtext under an illustration or image</p>
          </div>
          <div>
            <img src="https://via.placeholder.com/150" alt="" />
            <p>this is some subtext under an illustration or image</p>
          </div>
          <div>
            <img src="https://via.placeholder.com/150" alt="" />
            <p>this is some subtext under an illustration or image</p>
          </div>
          <div>
            <img src="https://via.placeholder.com/150" alt="" />
            <p>this is some subtext under an illustration or image</p>
          </div>
        </div>
      </div>

      <div>
        <p>
          This is an inspiring quote, or a testimonial from a customer. Maybe
          it's just filling up space, or maybe people will actually read it. Who
          knows? All I know is that it looks nice.
        </p>
        <p >-Thor, God of Thunder</p>
      </div>

      <div >
        <div>
          <p >Call to action! It's time!</p>
          <p>
            Sign up for our product by clicking that button right over there
          </p>
        </div>
        <div>
          <button >Sign up</button>
        </div>
      </div>
    </div>
  </body>
</html>

I want the width of each element inside outer div is full page width 100% like this https://cdn.statically.io/gh/TheOdinProject/curriculum/main/foundations/html_css/project/odin-project.png

I try using class container-fluid but the text will not be inside container

CodePudding user response：

You could combine container-fluid and container:

<div >
    <div >
        ...
    </div>
</div>