Display: flex; not lining up items horizontally

HTML-CSS
1

According to the flex box in 20 minutes video display: flex; should line up items horizontally but it’s not.


#box2 {
	display: flex;
}



<div id="box2>

    <section id="boxes">
      <div class="container">
        <div class="box1">
          <img src="logo_html.png">
          <h3>HTML5</h3>
          <p>I format my code, know proper tags, and learn proper ways fast.</p>
        </div>
        <div class="box2">
          <img src="logo_css.png">
          <h3>CSS3</h3>
          <p>I know how to style web pages, add animations and transitions<p>
        </div>
       </div>
    </section>
</div>
2

heres my code.


<div id="box2>

    <section id="boxes">
      <div class="container">
        <div class="box1">
          <img src="logo_html.png">
          <h3>HTML5</h3>
          <p>I format my code, know proper tags, and learn proper ways fast.</p>
        </div>
        <div class="box2">
          <img src="logo_css.png">
          <h3>CSS3</h3>
          <p>I know how to style web pages, add animations and transitions<p>
        </div>
       </div>
    </section>
</div>



#box2 {
	display: flex;
}

According to the flexbox in 20 minutes video this should place the items horizontally.

3

I have merged your topics. You’ll get much better resutls if you don’t create multiple threads for the same issue.

4

For flexbox you put them in a flex-container.
Then for each element in the container you set the flex values.

// Example wrapper
#box2 {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
// Section holding the boxes, set it to flex.
#boxes {
  display: flex;
}
// Speciy the flex-grow flex-shrink flex-basis|auto|initial|inherit;
// grow by 1, shrink by 0, basis 100px (length of the item)
.box1{
  flex: 1 0 100px;
}
// Same for this one.
.box2{
  flex: 1 0 100px;
}
5

Instead of id(#box2) apply flex on classes(.box1,box2) like this.

.box1, .box2{
    display: flex;
  }