Why is my flexbox creating a long, thin line and not three boxes?

jarvic1207 0
Viewed 45

I am working on a landing page for The Odin Project.

I have, so far, created three flexbox divs; one for the top background-color, a second for the header logo, and the third for three colored boxes where I am going to place my text.

The problem I am having is that instead of three colored boxes being made, I have one long line on my screen which I assume is the border.

* {
  margin: 0 auto;
}

.header {
  width: 100%;
  height: 300px;
  background-color: #1F2937;
  position: absolute;
  display: flex;
  justify-content: right;
  flex-direction: row;
}

.header_logo {
  /* background-color:red;
    border: black solid 2px; */
  width: 120px;
  height: 60px;
  margin-left: 100px;
  font-size: 10px;
  margin-top: 20px;
  color: white;
  font-family: "Roboto";
  white-space: nowrap;
  /* Keeps one line header and not 2 lines */
}

.header_boxes div {
  background: peachpuff;
  border: 4px solid brown;
  height: 80px;
  flex: 1 1 auto;
}
<div class="header">
  <div class="header_logo">
    <h1>Header Logo</h1>
  </div>

  <div class="header_boxes">
    <div class="one">

    </div>
    <div class="two">

    </div>
    <div class="three">

    </div>

  </div>

This is what i have: My website

css html
2 Answers

Simply add content to your .header_boxes div's and set the .header_boxes class display property to flex as well to achieve the layout I'm pretty sure you're after.

.header_boxes {dispay:flex}

Here's a codepen for you to compare against your code: https://codepen.io/conradqq-the-reactor/pen/XWqKENp

conradQQ0

You didn't close the div with class three. If it doesn't work I think it has to do something with that flex: 1 1 auto;. Tomorrow morning I will try to answer your question because I need to turn on my pc.

Klevis Imeri0
Related