почему не получается выставить margin: авто

Ребят, верстаю адаптивную страницу, есть список карточек, в карточке находиться иконка. Сломала всю голову, но не понимаю почему не получается выставить margin: 14px 14px 0 auto, помогите пожалуйста разобраться!

почему не получается выставить margin: авто, мне нужно поместить иконку, что в карточке в правый верх.угол, не сдвигается

HTML

<li className="movies__card">
      <img
        src={movie.thumbnail}
        alt={movie.nameRU}
        className="movies__card_poster"
      />
      <div className="movies__card_description">
        <div className="movies__card_title-block">
          <h5 className="movies__card_title">{movie.nameRU}</h5>
        </div>
        <div className="movies__card_duration-block">
          <p className="movies__card_duration">{movie.duration}</p>
        </div>
      </div>
      {location.pathname === "/movies" && (
        <button
          type="button"
          className={`movies__card_save ${
            movie.favorite && "movies__card_save-active"
          }`}
        ></button>
      )}

      {location.pathname === "/saved-movies" && (
        <button type="button" className="movies__card_delete"></button>
      )}
</li>

CSS

.movies__card {
  display: flex;
  border-radius: 6px;
  width: 100%;
  max-width: 360px;
  flex-direction: column;
  position: relative;
}

.movies__card_poster {
  width: 100%;
  max-width: 360px;
  object-fit: contain;
}

.movies__card_description {
  max-width: 332px;
  height: 32px;
  display: flex;
  justify-content: space-between;
  margin: 14px 14px 0;
  align-items: center;
}

.movies__card_title-block {
  display: flex;
  flex-flow: column;
  width: 250px;
}

.movies__card_title {
  margin: 0;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 13px;
  line-height: 16px;
  color: #000000;
}

.movies__card_duration-block {
  width: 52px;
  height: 18px;
  background-color: #f9f9f9;
  text-align: center;
  margin: 0 4px 0 0;
  border-radius: 3px;
}

.movies__card_duration {
  font-family: "Inter", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 11px;
  line-height: 10px;
  color: #a0a0a0;
  margin: 4px 4px 0;
}

.movies__card_save {
  background-image: none;
  background-color: transparent;
  display: flex;
  position: absolute;
  min-width: 72px;
  height: 21px;
  padding: 0;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin: 0;
  background-size: contain;
}

.movies__card_save:hover {
  background-image: url(../../../images/icon.svg);
}

.movies__card_save-active {
  background-image: url(../../../images/icon-activ.svg);
  width: 21px;
  height: 21px;
  padding: 0;
  border: none;
  background-position: 51px;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain;
  margin: 0;
  position: absolute;
}

.movies__card_delete {
  background-image: none;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain;
  border: none;
  padding: 0;
  width: 21px;
  height: 21px;
  position: absolute;
  margin: 0;
  cursor: pointer;
}

.movies__card_delete:hover {
  background-image: url(../../../images/icon-delete.svg);
}