Why div are overlapping

Question

I try to put many div's like this. But something is wrong, all them are overlapped.

I tried to search internet but couldn't find solution.

Any tips to fix it?

Thank you.

#myProgress {
  width: 100%;
  background-color: #ddd;
max-width: 500px;
  position: absolute;
  overflow: hidden;
}

#gamename {
 float: left;
  height: 30px;
  background-color: #4CAF50;
  text-align: left;
  line-height: 30px;
  color: white;
  overflow: hidden
}
#gamefps {
 float: right;
  width: 100px;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  overflow: hidden
}

<div id="myProgress">
  <div id="gamename" style="width:30%">PUBG</div>
  <div id="gamefps">85 FPS</div>
</div>
<br>
<div id="myProgress">
  <div id="gamename" style="width:40%">VALORANT</div>
  <div id="gamefps">95 FPS</div>
</div>
<div id="myProgress">
  <div id="gamename" style="width:50%;">FORTNITE</div>
  <div id="gamefps">110 FPS</div>
</div>
<div id="myProgress">
  <div id="gamename" style="width:60%; ">APEX LEGENT</div>
  <div id="gamefps">130 FPS</div>
</div>

Answer 1

You're using position: absolute in your css and also remove <br> from your html

#myProgress {
  width: 100%;
  background-color: #ddd;
  max-width: 500px;
  position: relative; // Here change absolute with relative
  overflow: hidden;
}

And in your code, if you've multiple similar elements, its better to use a class than an id.

.myProgress {
  width: 100%;
  background-color: #ddd;
max-width: 500px;
  position: relative;
  overflow: hidden;
}

.gamename {
 float: left;
  height: 30px;
  background-color: #4CAF50;
  text-align: left;
  line-height: 30px;
  color: white;
  overflow: hidden
}
.gamefps {
 float: right;
  width: 100px;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
  overflow: hidden
}

<div class="myProgress">
  <div class="gamename" style="width:30%">PUBG</div>
  <div class="gamefps">85 FPS</div>
</div>
<div class="myProgress">
  <div class="gamename" style="width:40%">VALORANT</div>
  <div class="gamefps">95 FPS</div>
</div>
<div class="myProgress">
  <div class="gamename" style="width:50%;">FORTNITE</div>
  <div class="gamefps">110 FPS</div>
</div>
<div class="myProgress">
  <div class="gamename" style="width:60%; ">APEX LEGENT</div>
  <div class="gamefps">130 FPS</div>
</div>