hi i cannot make the blue boxes on my webpage appear side by side horizontally not sure why this is happening because i have display flex and flex direction row for the .box-cover class i am new to css apologies for the beginner question i set width of the box cover to 25% and enabled border box but it still does not work

* {
  font-family: Roboto, sans-serif;
  color: #f9faf8;
}


h2 {
  font-size: 24px;
  font-weight: 900;
  color: #f9faf8;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;

}

nav ul {
  display: flex;
  justify-content: space-between;
  width: 40%;
}

nav ul li {
  list-style-type: none;
  font-size: 18px;
  color: #e5e7eb;
}

.hero {
  font-size: 48px;
}

button {
  background-color: #3882f6;
  border-radius: 5px;
}

#section1 {
  background-color: #1f2937;
  width: 100%;
  height: 25vh;
}

#section2 {
  background-color: #f9faf8;
  width: 100%;
  height: 25vh;
  color: #1f2937;
}

.box {
  border: 1px solid #3882f6;
  padding: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.box-cover {
  display: flex;
  flex-direction: row;
  width: 25%;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

<div id="section1">
  <nav>
    <h2>Header Logo</h2>
    <ul>
      <li><a>Header link one</a></li>
      <li><a>Header link two</a></li>
      <li><a>Header link three</a></li>
    </ul>
  </nav>
  <header>
    <h1 class="hero">This website is awesome</h1>
    <p>text here</p>
    <button>sign up</button>
  </header>
</div>
<section id="section2">
  <h1>Some random information</h1>
  <div class="box-cover">
    <div class="box"></div>
  </div>
  <div class="box-cover">
    <div class="box"></div>
  </div>
  <div class="box-cover">
    <div class="box"></div>
  </div>
  <div class="box-cover">
    <div class="box"></div>
  </div>
</section>
<section>
  <p></p>
</section>
<section>
  <div><button>sign up</button></div>
</section>
<footer>
  <p></p>
</footer>

hi i cannot make the blue boxes on my webpage appear side by side horizontally not sure why this is happening because i have display flex and flex direction row for the .box-cover class i am new to css apologies for the beginner question i set width of the box cover to 25% and enabled border box but it still does not work

* {
  font-family: Roboto, sans-serif;
  color: #f9faf8;
}


h2 {
  font-size: 24px;
  font-weight: 900;
  color: #f9faf8;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;

}

nav ul {
  display: flex;
  justify-content: space-between;
  width: 40%;
}

nav ul li {
  list-style-type: none;
  font-size: 18px;
  color: #e5e7eb;
}

.hero {
  font-size: 48px;
}

button {
  background-color: #3882f6;
  border-radius: 5px;
}

#section1 {
  background-color: #1f2937;
  width: 100%;
  height: 25vh;
}

#section2 {
  background-color: #f9faf8;
  width: 100%;
  height: 25vh;
  color: #1f2937;
}

.box {
  border: 1px solid #3882f6;
  padding: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.box-cover {
  display: flex;
  flex-direction: row;
  width: 25%;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

<div id="section1">
  <nav>
    <h2>Header Logo</h2>
    <ul>
      <li><a>Header link one</a></li>
      <li><a>Header link two</a></li>
      <li><a>Header link three</a></li>
    </ul>
  </nav>
  <header>
    <h1 class="hero">This website is awesome</h1>
    <p>text here</p>
    <button>sign up</button>
  </header>
</div>
<section id="section2">
  <h1>Some random information</h1>
  <div class="box-cover">
    <div class="box"></div>
  </div>
  <div class="box-cover">
    <div class="box"></div>
  </div>
  <div class="box-cover">
    <div class="box"></div>
  </div>
  <div class="box-cover">
    <div class="box"></div>
  </div>
</section>
<section>
  <p></p>
</section>
<section>
  <div><button>sign up</button></div>
</section>
<footer>
  <p></p>
</footer>

• html
• css

• You have applied flex to the wrong elements, it should be on #section2 – Paulie_D Commented Feb 2 at 17:53
• @Paulie_D the text in #section2 does not appear as grey #1f2937 – theonerishi Commented Feb 2 at 18:17

1 Answer 1

Just apply the flex property to the #section2 div so all the boxes are set to the horizontal line as per the below code. Also, the #section2 color does not appear because of the h1 tag by default, the color is white, so give color to the h1 tag also so you can show the #section2 text.

* {
    font-family: Roboto, sans-serif;
    color: #f9faf8;
}


h2 {
    font-size: 24px;
    font-weight: 900;
    color: #f9faf8;
}

nav {
    display: flex;
    justify-content: space-around;
    align-items: center;

}

nav ul {
    display: flex;
    justify-content: space-between;
    width: 40%;
}

nav ul li {
    list-style-type: none;
    font-size: 18px;
    color: #e5e7eb;
}

.hero {
    font-size: 48px;
}

button {
    background-color: #3882f6;
    border-radius: 5px;
}

#section1 {
    background-color: #1f2937;
    width: 100%;
    height: 25vh;
}

#section2 {
    background-color: #f9faf8;
    width: 100%;
    height: 25vh;
    color: #1f2937;
    display: flex;
    flex-wrap: wrap;
}

#section2 h1 {
    color: #1f2937;
    width: 100%;
}

.box {
    border: 1px solid #3882f6;
    padding: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.box-cover {
    display: flex;
    flex-direction: row;
    width: 25%;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

<div id="section1">
    <nav>
        <h2>Header Logo</h2>
        <ul>
            <li><a>Header link one</a></li>
            <li><a>Header link two</a></li>
            <li><a>Header link three</a></li>
        </ul>
    </nav>
    <header>
        <h1 class="hero">This website is awesome</h1>
        <p>text here</p>
        <button>sign up</button>
    </header>
</div>
<section id="section2">
    <h1>Some random information</h1>
    <div class="box-cover">
        <div class="box"></div>
    </div>
    <div class="box-cover">
        <div class="box"></div>
    </div>
    <div class="box-cover">
        <div class="box"></div>
    </div>
    <div class="box-cover">
        <div class="box"></div>
    </div>
</section>
<section>
    <p></p>
</section>
<section>
    <div><button>sign up</button></div>
</section>
<footer>
    <p></p>
</footer>

If you remove the height for the above two sections, then that automatically fixes the overlap issue in the small screen.