Как сместить блоки вправо?

Question

Помогите перенести блоки в правую часть и уменьшить расстояние между ними:

display: flex;
    flex-wrap: wrap;
}

.features__item {
    width: 20%;
    margin: 5px 0;
}

.features__icon {
    width: 65%;
    margin-bottom: 5px;
}

.features__title {
    margin-top: 0;
    margin-bottom: 3px;
    font-size: 14px;
    color: #2d3033;
    font-weight: 700;
    text-transform: uppercase;
}

.features__text {
    font-size: 14px;
    line-height: 1.5;
    color: #6c7279;
}

<div class="features">
        <div class="features__item">
            <a class = "hrf" href="book.html">
            <img class="features__icon" src="img/img_1.jpg" alt=""></a>
             <h4 class="features__title">Король Воронов</h4>
            <div class="features__text">Норд Сакавич</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_2.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">НИ СЫ</h4>
            <div class="features__text">Джен Синсеро</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_3.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Богатый папа, бедный папа</h4>
            <div class="features__text">Роберт Кийосаки</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_4.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Самый богатый человек в Вавилоне</h4>
            <div class="features__text">Джордж С.Клейсон</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_5.html">
                <img class="features__icon" src="img/img_1.jpg"s alt=""></a>
            <h4 class="features__title">Метод волка с Уолл стрит.</h4>
            <div class="features__text">Джордан Белфорт</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_6.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Код да Винчи</h4>
            <div class="features__text">Дэн Браун</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_7.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">The Everything Store.</h4>
            <div class="features__text">Стоун Брэд</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_8.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Forbes Book</h4>
            <div class="features__text">Мухамедова А, Ивахненко Л.</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_9.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Sapiens. Краткая история человечества</h4>
            <div class="features__text">Юваль Ной Харари</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_10.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Тонкое искусство пофигизма</h4>
            <div class="features__text">Марк Мэнсон</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_11.html">
                <img class="features__icon" src="img/img_1.jpg"s alt=""></a>
            <h4 class="features__title">НЕ НОЙ</h4>
            <div class="features__text">Джен Синсеро</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_12.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Метро 2033</h4>
            <div class="features__text">Глуховский Д.</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_13.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Метро 2034</h4>
            <div class="features__text">Глуховский Д.</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_14.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Метро 2035</h4>
            <div class="features__text">Глуховский Д.</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_15.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">1984</h4>
            <div class="features__text">Оруэлл Дж.</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_16.html">
            <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">НЕ ТУПИ. Только тот, кто ежедневно работает над собой, живет жизнью мечты</h4>
            <div class="features__text">Джен Синсеро</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_17.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Гарри Поттер и узник Азкабана (Гриффиндор)</h4>
            <div class="features__text">Роулинг Дж.</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_18.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Гарри Поттер и узник Азкабана (Слизерин)</h4>
            <div class="features__text">Роулинг Дж.</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_19.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Гарри Поттер и узник Азкабана (Вранзор)</h4>
            <div class="features__text">Роулинг Дж.</div>
        </div>
        
        <div class="features__item">
            <a class = "hrf" href="book_20.html">
                <img class="features__icon" src="img/img_1.jpg" alt=""></a>
            <h4 class="features__title">Гарри Поттер и узник Азкабана (Хуффльпуфф)</h4>
            <div class="features__text">Роулинг Дж.</div>
        </div>
    </div>
</div>

Answer 1

Грубо так, для примера:

.features {
  display: flex;
  flex-wrap: wrap;
}

.features__item {
  flex: 1 0 150px;
  min-height: 100px;
  margin: 5px;
  padding: 5px;
  position: relative;
  word-break: break-all;
  overflow: hidden;
}

.features__icon {
  width: 100%;
  height: 100%;
  margin-bottom: 5px;
  background: skyblue;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.features__title {
  margin-top: 0;
  margin-bottom: 3px;
  font-size: 14px;
  color: #2d3033;
  font-weight: 700;
  text-transform: uppercase;
}

.features__text {
  font-size: 14px;
  line-height: 1.5;
  color: #6c7279;
}

<div class="features">
  <div class="features__item">
    <a class="hrf" href="book.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt="" /></a>
    <h4 class="features__title">Король Воронов</h4>
    <div class="features__text">Норд Сакавич</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_2.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">НИ СЫ</h4>
    <div class="features__text">Джен Синсеро</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_3.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">Богатый папа, бедный папа</h4>
    <div class="features__text">Роберт Кийосаки</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_4.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">Самый богатый человек в Вавилоне</h4>
    <div class="features__text">Джордж С.Клейсон</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_5.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" s alt=""></a>
    <h4 class="features__title">Метод волка с Уолл стрит.</h4>
    <div class="features__text">Джордан Белфорт</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_6.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100g" alt=""></a>
    <h4 class="features__title">Код да Винчи</h4>
    <div class="features__text">Дэн Браун</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_7.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">The Everything Store.</h4>
    <div class="features__text">Стоун Брэд</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_8.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">Forbes Book</h4>
    <div class="features__text">Мухамедова А, Ивахненко Л.</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_9.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">Sapiens. Краткая история человечества</h4>
    <div class="features__text">Юваль Ной Харари</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_10.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">Тонкое искусство пофигизма</h4>
    <div class="features__text">Марк Мэнсон</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_11.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" s alt=""></a>
    <h4 class="features__title">НЕ НОЙ</h4>
    <div class="features__text">Джен Синсеро</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_12.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">Метро 2033</h4>
    <div class="features__text">Глуховский Д.</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_13.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">Метро 2034</h4>
    <div class="features__text">Глуховский Д.</div>
  </div>

  <div class="features__item">
    <a class="hrf" href="book_14.html">
      <img class="features__icon" src="https://www.fillmurray.com/150/100" alt=""></a>
    <h4 class="features__title">Метро 2035</h4>
    <div class="features__text">Глуховский Д.</div>
  </div>
</div>
</div>

БЛОГ НА HUSL

Как сместить блоки вправо?

Ответы (1 шт):