Setting position of custom slider controls (CSS)

I've been making my own anime website where people can watch anime for free with subtitles (Bulgarian subtitles, since Im from Bulgaria). Now Im remaking it from scratch because I have been using a theme but It didn't have much functionality... Now im making the slider for the recently added animes but I want it to be a custom one so Im making.... the slider controls are not in position, so I tried with float, flex with float and etc.... Here's a picture where it should belong: click to open the image (important)

Here's the HTML:

        <div class="recent-anime">
      <!-- Title and Controls -->
      <div class="title-controls">
        <h1 class="title">Наскоро добавни</h1>
        <a><i class="fas fa-angle-left"></i></a>
        <a><i class="fas fa-angle-right"></i></a>
      </div>
      <!-- Anime cards -->
      <div class="animecards">

        <div class="animecard">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>

        <div class="animecard ml">
          <img src="images/cover.png">

          <div class="ani">
            <p class="anititle">Anime title</p>
            <p class="aniepisode">Episode</p>
          </div>
        </div>  

      </div>
    </div>

And the CSS:

.title-controls {
  display: flex;
  flex-direction: row;
  font-size: 42px;
  margin-bottom: 10px;
}
.title {
  font-size: 26px;
}

.animecards {
  display: flex;
}
.animecard {
  display: block;
  float: left;
}
.animecard img {
  max-height: 325px;
}
.ml {
  margin-left: 15px;
}
.ani {
  text-align: center;
}

There's no JS. Still on the HTML and CSS part. NOTE: This is clean CSS!