@OnlyOrly
Начинаю изучать верстку html css js

Как убрать сдвиг влево при добавлении картинки?

Не могу понять как убрать сдвиг, помогите пожалуйста.
При добавлении картинки в код, страница сдвигается влево примерно на 5px.
Код


HTML

<div class="container">
<article class="articles">
<div class="div">
    <h3>Заголовок</h3>
    <p>Описание.</p>
    <img src="./img/1.JPG" alt="1">
</div>
</article>
<aside class="sidebar">
<aside>
</div>


CSS

.container {
    max-width: 1170px;
    margin: 0 auto;
    background-color: #fff;
}

.articles {
    width: 71%;
}

.div {
    display: flex;
    flex-direction: column;
    align-items: center;    

    width: auto;
    height: auto;
    margin-top: 100px;

    text-align: center;
}
.div h3 {
    margin-bottom: 20px;
}
.div p {
    margin-bottom: 20px;
}
.div img {
    display: block;
    max-width: 100%;
    margin-bottom: 50px;
}
.sidebar {
    width: 25%;
}

  • Вопрос задан
  • 84 просмотра
Пригласить эксперта
Ответы на вопрос 2
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
z80b
@z80b
Frontend
до загрузки картинка не имеет размера, установите ей конкретные размеры...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы