Как убрать отступы?

Question

[Булат Миннибаев]

Не знаю откуда эти отступы и как их убрать, если объясните почему так буду очень благодарен, код ниже.

<div class="portfolio-items">
        <div class="portfolio-item"><img src="img/portfolio-item-1.jpg" alt="#"></div>
        <div class="portfolio-item"><img src="img/portfolio-item-2.jpg" alt="#"></div>
        <div class="portfolio-item"><img src="img/portfolio-item-3.jpg" alt="#"></div>
        <div class="portfolio-item"><img src="img/portfolio-item-4.jpg" alt="#"></div>
    </div>
    <div class="portfolio-items">
        <div class="portfolio-item"><img src="img/portfolio-item-1.jpg" alt="#"></div>
        <div class="portfolio-item portfolio-item-more-info">
            <div class="portfolio-item-info">
                <h3>88м<sup>2</sup></h3>
                <p>ЖК Мосфильм</p>
                <a href="#" class="btn">
                    Подробнее
                </a>
                <img src="img/portfolio-item-2.jpg" alt="#">
            </div>
            <img src="img/portfolio-item-2.jpg" alt="#">
        </div>
        <div class="portfolio-item"><img src="img/portfolio-item-3.jpg" alt="#"></div>
        <div class="portfolio-item"><img src="img/portfolio-item-4.jpg" alt="#"></div>
    </div>
    <div class="portfolio-items">
        <div class="portfolio-item"><img src="img/portfolio-item-1.jpg" alt="#"></div>
        <div class="portfolio-item"><img src="img/portfolio-item-2.jpg" alt="#"></div>
        <div class="portfolio-item"><img src="img/portfolio-item-3.jpg" alt="#"></div>
        
        <div class="portfolio-item portfolio-item-more">
        <div class="portfolio-description"><h3>Больше готовых проектов</h3></div>
            <div class="portfolio-description-btn">
                <a href="#" class="btn">смотреть готовые проекты</a>
            </div>
        </div>
    </div><img src="https://habrastorage.org/webt/5b/05/b1/5b05b1371d2d9215366219.png" alt="image"/>

.portfolio-items{
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  transition: 0.3s ease-in-out;

}

.portfolio-item{
  max-width: 25%;
  padding: 0;
  margin: 0;
}

Answer 1

[Александр]

Как вариант задать

img { 
    display: block;
    margin: 0;
    padding: 0;
}

Answer 2

[inkShio]

Мало инфы. То что ты скинул ни о чем не говорит. Может у картинки отступ задан, а может что то другое.

Answer 3

[Роман Мусалимов]

Я думаю что .portfolio-items обернуть в контейнер, и прописать ему следующие параметры:

<div class="container">
   <div class="portfolio-items">
       <div class="portfolio-item"><img src="img/portfolio-item-1.jpg" alt="#"></div>
       <div class="portfolio-item"><img src="img/portfolio-item-2.jpg" alt="#"></div>
   </div>
</div>

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.portfolio-items{
  display: flex;
  margin: 0;
  padding: 0;
  transition: 0.3s ease-in-out;
}

Пробуй так, должно помочь)