Flex box wont span the entire width of the page even if i set width to 100%

Question

Created Flex box with a background image but the box itself wont span the entire width of the page even if i set width to 100%. Ihave not set any other element over 100% of the width so idk what seems to be the issue here.

    <div class="head"><h1> The VC Experience</h1></div>
    <nav><ul>
      <li><a href="mission">Mission Statement</a></li>
      <li><a href="portfolio">Portfolio</a></li>
      <li><a href="investment">Investment Team</a></li>
    </ul></nav>
    <div class="mission" id="mission">
    </div>

styles


.head{
    display: flex;
    height:100px;
    width:100%;
    font-size: calc(1rem + 1vw);
    justify-content: center;
    align-items: center;
}

.head h1{
    text-align: center;   
}

nav ul{
    margin-top:50px;
    margin-bottom:50px;
    display:flex;
    flex-direction: row;
    width:100%;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    list-style: none;
}

nav ul li{   
    margin:0 10px;
}

nav ul li a{
    display: inline;
    color: black;
    font-size:calc(0.8rem + 1vw);
}

.mission{
    background-color: black;
    display:flex;
    min-height:320px;
    width:100%;
    background-image: url("pictures/5be98a7d18e35.jpg");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

width:100% means 100 percent of the parent container. If that container doesn't span the whole width, neigher won't the child. Make sure the parent spans the entire with, e.g. by setting it to width: 100vw; — Hoff, May 30 '21 at 12:03
The issue is not flexbox. The issue is that the `body` element, by default, has a margin of 8px. Add `body { margin: 0 }` to your code to override the browser default. https://jsfiddle.net/w2q8bfrL/ — Michael Benjamin, May 30 '21 at 12:03

score 0 · Answer 1 · answered May 30 '21 at 12:07

In this kind of display you should always explicitly state that the <body> (or :root element) has:

margin: 0
padding: 0

Working Example:

:root {
  margin: 0;
  padding: 0;
}

.head {
    display: flex;
    height: 100px;
    width: 100%;
    font-size: calc(1rem + 1vw);
    justify-content: center;
    align-items: center;
}

.head h1 {
    flex: 1 0 100%;
    text-align: center;   
}

nav ul {
    margin-top:50px;
    margin-bottom:50px;
    display:flex;
    flex-direction: row;
    width:100%;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
    list-style: none;
}

nav ul li {   
    margin:0 10px;
}

nav ul li a {
    display: inline;
    color: black;
    font-size:calc(0.8rem + 1vw);
}

.mission {
    background-color: black;
    display:flex;
    min-height:320px;
    width:100%;
    background-image: url("pictures/5be98a7d18e35.jpg");
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

<div class="head">
  <h1> The VC Experience</h1>
</div>

<nav>
  <ul>
    <li><a href="mission">Mission Statement</a></li>
    <li><a href="portfolio">Portfolio</a></li>
    <li><a href="investment">Investment Team</a></li>
  </ul>
</nav>

<div class="mission" id="mission"></div>

Flex box wont span the entire width of the page even if i set width to 100%

1 Answers1