skip to Main Content

I’m very new to HTML/CSS, and I’ve been following this tutorial video. @42:10 of the video — When I try the "display: flex" to list the skills in two columns, it just ends up in one column that is center-justified (see screenshot and my code below). I’m wondering does anyone know why it isn’t working for me / what I’m doing wrong?

screenshot: one column instead of two! :(

.skills__content {
  row-gap: 3.5rem;
}

.skills__title {
  font-size: var(--h3-font-size);
  text-align: center;
  margin-bottom: 1.5rem;
}

.skills__box {
  display: flex;
  justify-content: center;
  column-gap: 3rem;
}

.skills__group {
  display: grid;
  align-content: flex-start;
  row-gap: 1rem;
}

.skills__data {
  display: flex;
  column-gap: .5rem;
}

.skills__data {
  display: flex;
  column-gap: .5rem;
}

.skills__data i {
  font-size: 1.2rem;
  color: var(--first-color);
}

.skills__name {
  font-size: var(--normal-font-size);
  font-weight: 500;
  line-height: 18px;
}

.skills__level {
  font-size: var(--smaller-font-size);
}
<div class="skills__content grid" data-content id="skills">
  <div class="skills__area">
    <h3 class="skills__title">
      Front-End Developer
    </h3>

    <div class="skills__box">
      <div class="skills__group">
        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">HTML</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">CSS</h3>
            <span class="skills__level">Advanced</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">JavaScript</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">React</h3>
            <span class="skills__level">Intermediate</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Bootstrap</h3>
            <span class="skills__level">Intermediate</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Git</h3>
            <span class="skills__level">Intermediate</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="skills__area">
    <h3 class="skills__title">
      Back-End Developer
    </h3>

    <div class="skills__box">
      <div class="skills__group">
        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Python</h3>
            <span class="skills__level">Advanced</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Golang</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">Java</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">C++</h3>
            <span class="skills__level">Advanced</span>
          </div>
        </div>

        <div class="skills__data">
          <i class="ri-checkbox-circle-line"></i>

          <div>
            <h3 class="skills__name">SQL</h3>
            <span class="skills__level">Basic</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2

Answers


  1. Chosen as BEST ANSWER

    Thanks to the hint provided by Alochi above, I was able to fix the bug in my code. Originally, I had grouped all of the skills under one skills__group per each skills_box -- In order for the flexbox to show two columns, there should be two skills__groups per each skills__box (see updated HTML code below). Thanks so much for all the help!!

    enter image description here

    .skills__content {
      row-gap: 3.5rem;
    }
    
    .skills__title {
      font-size: var(--h3-font-size);
      text-align: center;
      margin-bottom: 1.5rem;
    }
    
    .skills__box {
      display: flex;
      justify-content: center;
      column-gap: 3rem;
    }
    
    .skills__group {
      display: grid;
      align-content: flex-start;
      row-gap: 1rem;
    }
    
    .skills__data {
      display: flex;
      column-gap: .5rem;
    }
    
    .skills__data {
      display: flex;
      column-gap: .5rem;
    }
    
    .skills__data i {
      font-size: 1.2rem;
      color: var(--first-color);
    }
    
    .skills__name {
      font-size: var(--normal-font-size);
      font-weight: 500;
      line-height: 18px;
    }
    
    .skills__level {
      font-size: var(--smaller-font-size);
    }
                        <div class="skills__content grid" data-content id="skills">
                            <div class="skills__area">
                              <h3 class="skills__title">
                                Front-End Developer
                              </h3>
    
                              <div class="skills__box">
                                <div class="skills__group">
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">HTML</h3>
                                      <span class="skills__level">Basic</span>
                                    </div>
                                  </div>
    
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">CSS</h3>
                                      <span class="skills__level">Advanced</span>
                                    </div>
                                  </div>
    
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">JavaScript</h3>
                                      <span class="skills__level">Basic</span>
                                    </div>
                                  </div>
                                </div>
    
                                <div class="skills__group">
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">React</h3>
                                      <span class="skills__level">Intermediate</span>
                                    </div>
                                  </div>
    
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">Bootstrap</h3>
                                      <span class="skills__level">Intermediate</span>
                                    </div>
                                  </div>
    
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">Git</h3>
                                      <span class="skills__level">Intermediate</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
    
                            <div class="skills__area">
                              <h3 class="skills__title">
                                Back-End Developer
                              </h3>
    
                              <div class="skills__box">
                                <div class="skills__group">
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">Python</h3>
                                      <span class="skills__level">Advanced</span>
                                    </div>
                                  </div>
    
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">Golang</h3>
                                      <span class="skills__level">Basic</span>
                                    </div>
                                  </div>
    
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">Java</h3>
                                      <span class="skills__level">Basic</span>
                                    </div>
                                  </div>
                                </div>
    
                                <div class="skills__group">
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">C++</h3>
                                      <span class="skills__level">Advanced</span>
                                    </div>
                                  </div>
    
                                  <div class="skills__data">
                                    <i class="ri-checkbox-circle-line"></i>
    
                                    <div>
                                      <h3 class="skills__name">SQL</h3>
                                      <span class="skills__level">Basic</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        <div>


  2. Your code is perfect, you have two menus in columns, you just need to add a couple of CSS rules to skills__content class to make them appear in rows.

    Add another display flex and center it

    .skills__content {
      row-gap: 3.5rem;
      display: flex; /* Show in rows */
      justify-content: center;
      gap:20px
    }
    
    .skills__title {
      font-size: var(--h3-font-size);
      text-align: center;
      margin-bottom: 1.5rem;
    }
    
    .skills__box {
      display: flex;
      justify-content: center;
      column-gap: 3rem;
    }
    
    .skills__group {
      display: grid;
      align-content: flex-start;
      row-gap: 1rem;
    }
    
    .skills__data {
      display: flex;
      column-gap: .5rem;
    }
    
    .skills__data {
      display: flex;
      column-gap: .5rem;
    }
    
    .skills__data i {
      font-size: 1.2rem;
      color: var(--first-color);
    }
    
    .skills__name {
      font-size: var(--normal-font-size);
      font-weight: 500;
      line-height: 18px;
    }
    
    .skills__level {
      font-size: var(--smaller-font-size);
    }
    <div class="skills__content grid" data-content id="skills">
      <div class="skills__area">
        <h3 class="skills__title">
          Front-End Developer
        </h3>
    
        <div class="skills__box">
          <div class="skills__group">
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">HTML</h3>
                <span class="skills__level">Basic</span>
              </div>
            </div>
    
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">CSS</h3>
                <span class="skills__level">Advanced</span>
              </div>
            </div>
    
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">JavaScript</h3>
                <span class="skills__level">Basic</span>
              </div>
            </div>
    
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">React</h3>
                <span class="skills__level">Intermediate</span>
              </div>
            </div>
    
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">Bootstrap</h3>
                <span class="skills__level">Intermediate</span>
              </div>
            </div>
    
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">Git</h3>
                <span class="skills__level">Intermediate</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    
      <div class="skills__area">
        <h3 class="skills__title">
          Back-End Developer
        </h3>
    
        <div class="skills__box">
          <div class="skills__group">
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">Python</h3>
                <span class="skills__level">Advanced</span>
              </div>
            </div>
    
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">Golang</h3>
                <span class="skills__level">Basic</span>
              </div>
            </div>
    
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">Java</h3>
                <span class="skills__level">Basic</span>
              </div>
            </div>
    
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">C++</h3>
                <span class="skills__level">Advanced</span>
              </div>
            </div>
    
            <div class="skills__data">
              <i class="ri-checkbox-circle-line"></i>
    
              <div>
                <h3 class="skills__name">SQL</h3>
                <span class="skills__level">Basic</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search