Center a title above progress bars-CodePudding

I actually have a problem with my title. I tried position: absolute before it worked but my navbar went through my title. So i'd like to find another method to center my title. I tried margin-left, but it push my progress bars away.. I'd like to keep the same amount of space between my 2 columns

What could be wrong/missing here ?

Here's my codepen : https://codepen.io/Softee/pen/bGYvELM

#espace {
    margin-right: 250px;
    width: 10%;
}

.barre{
    margin-top: 10px;
    margin-bottom: 30px;
    border: 2px solid #dba974;
    border-radius: 20px;
    width: 400px;
}

.barre div{
    height: 9px;
    border-radius: 10px;
    background-color: #dba974;
}

.competences{
    margin-top: 25%;
    align-content: center;
    width: 100%;
    height: 220px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.competences h1{
    font-size: 54px;
    color: #dba974;
    margin: auto;
    padding: auto;
    margin-top: -100px;
}

#html-barre{
    animation: html-fill 2s forwards;
}

@keyframes html-fill{
    from{
        width: 0%;
    }
  to {
    width: 90%;
  }
}

#css-barre{
    animation: css-fill 2s forwards;
}

@keyframes css-fill{
    from{
        width: 0%;
    }
  to {
    width: 70%;
  }
}

span{
    font-weight: 600;
    color: black;
}

<div >
    <h1>MES COMPÉTENCES</h1>
    <div  id="espace">
        <span>Adobe Photoshop</span>

        <div >
            <div id="html-barre"></div>
        </div>
    </div>
    <div >
        <span>Adobe Illustrator</span>

        <div >
            <div id="css-barre"></div>
        </div>
    </div>
    <div >
        <span>Adobe Lightroom</span>

        <div >
            <div id="css-barre"></div>
        </div>      
    </div>
    <div >
        <span>Adobe After Effects</span>

        <div >
            <div id="css-barre"></div>
        </div>      
    </div>
    <div >
        <span>Adobe Premiere Pro</span>

        <div >
            <div id="css-barre"></div>
        </div>
    </div>
    <div >
        <span>Blender</span>

        <div >
            <div id="css-barre"></div>
        </div>
    </div>
</div>

CodePudding user response：

You can use flex box and wrap only the two columns. The h1 would be outside the flexbox and you can align center.

#espace {
  margin-right: 10px;
}

.barre {
  margin-top: 10px;
  margin-bottom: 30px;
  border: 2px solid #dba974;
  border-radius: 20px;
  width: 400px;
}

.barre div {
  height: 9px;
  border-radius: 10px;
  background-color: #dba974;
}

.w {
  align-content: center;
  width: 100%;
  height: 220px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

.competences h1 {
  font-size: 54px;
  color: #dba974;
  text-align: center;
}

#html-barre {
  animation: html-fill 2s forwards;
}

@keyframes html-fill {
  from {
    width: 0%;
  }
  to {
    width: 90%;
  }
}

#css-barre {
  animation: css-fill 2s forwards;
}

@keyframes css-fill {
  from {
    width: 0%;
  }
  to {
    width: 70%;
  }
}

span {
  font-weight: 600;
  color: black;
}

<div >
  <h1>MES COMPÉTENCES</h1>
  <div >
    <div >
      <div  id="space">
        <span>Adobe Photoshop</span>

        <div >
          <div id="html-barre"></div>
        </div>
      </div>
      <div >
        <span>Adobe Illustrator</span>

        <div >
          <div id="css-barre"></div>
        </div>
      </div>
      <div >
        <span>Adobe Lightroom</span>

        <div >
          <div id="css-barre"></div>
        </div>
      </div>
    </div>

    <div >
      <div >
        <span>Adobe After Effects</span>

        <div >
          <div id="css-barre"></div>
        </div>
      </div>
      <div >
        <span>Adobe Premiere Pro</span>

        <div >
          <div id="css-barre"></div>
        </div>
      </div>
      <div >
        <span>Blender</span>

        <div >
          <div id="css-barre"></div>
        </div>
      </div>
    </div>

  </div>
</div>

CodePudding user response：

If you just want to center titles over your progress bars, just try adding this css in your styles.

.logiciels{
  display: flex;
  flex-direction: column;
  align-items: center;
}