How to align text with img in ul li HTML

Question

I want to make a page similar to Instagram to train techniques etc, but I can not align the texts with the photos, follow the code and pictures.

.div-stories {
  width: 100%;
  height: 104px;
  background: #FAFAFA;
  position: absolute;
  top: 45px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.stories {
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.stories ul {
  list-style: none;
  width: auto;
  margin-top: -5px;
}

.stories ul li {
  display: inline-block;
}

.pic-stories {
  width: 58px;
  height: 58px;
  border-radius: 50px;
  margin-left: 15px;
  margin-top: 10px;
  z-index: 5;
}

.more-stories {
  position: static;
  top: 63px;
  left: 37px;
  margin-left: -15px;
  width: 18px;
  height: 18px;
}

.txt-stories ul {
  list-style: none;
}

.txt-stories ul li {
  display: inline-block;
  position: relative;
  margin-left: 23px;
}

.effect-stories {
  width: 70px;
  height: 70px;
  border: double 6px white;
  border-radius: 50px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div class="div-stories">
  <nav class="stories">
    <ul>
      <li><img class="pic-stories" src="img/stories1.jpg"><img class="more-stories" src="img/more-stories.webp"></li>

      <li><img class="pic-stories effect-stories" src="img/stories2.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories3.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories4.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories5.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories6.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories7.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories8.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories9.jpg"></li>
    </ul>

    <nav class="txt-stories">
      <ul>
        <li>
          <p class="text-stories">Seu story</p>
        </li>
        <li>
          <p class="text-stories">shinigami...</p>
        </li>
        <li>
          <p class="text-stories">italo_rmds</p>
        </li>
        <li>
          <p class="text-stories">rodrigotea...</p>
        </li>
        <li>
          <p class="text-stories">princejack...</p>
        </li>
        <li>
          <p class="text-stories">viainfinda</p>
        </li>
        <li>
          <p class="text-stories">designer.bot</p>
        </li>
        <li>
          <p class="text-stories">mjacksonh</p>
        </li>
        <li>
          <p class="text-stories">reyzeryt</p>
        </li>
      </ul>
    </nav>


  </nav>
</div>

I'm learning html and css

Answer 1

This might help you; using Flexbox you can align items either in rows or columns pretty easily without defining exact sizes. This also helps keep the names aligned even if they are not the same size.

The width I set on the container is just to demonstrate how each item spreads out and aligns with its name; you can set this however you want

.container {
  overflow-x: auto;
  width: 1000px;
}

.stories {
  display: flex;
  list-style: none;
  padding: 0;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pic {
  border-radius: 50%;
  border: double 6px white;
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div class="container">
  <ul class="stories">
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username large</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username very large</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
  </ul>
</div>