<section class="about" id="about">
<div class="about-img">
<img src="img/about.jpg" alt="">
</div>
<div class="about-text">
<h2>Обо мне</h2>
<h4>ТЕКСТ</h4>
<p>МНОГО ТЕКСТА </p>
</div>
</section>
.about {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 1.5rem;
}
.about-img img {
max-width: 530px;
height: auto;
width: 100%;
border-radius: 8px;
padding: 66px;
}
.about-text {
padding: -13px;
}
.about-text h2 {
font-size: 16px;
line-height: 1;
}
.about-text h4 {
font-size: 24px;
font-weight: 600;
color: #fe7c26;
line-height: 1.7;
margin: 15px 0 30px;
}
.about-text p {
font-size: 14px;
line-height: 1.8;
margin-bottom: 4rem;
}
Cейчас у меня есть фото слева. И текст справа. Но почему-то создается нижний скролл :/ И расстояние между текстом и фотографией слишком большое. Я попробовала добавить падинг фото. Но тогда оно уменьшается в размере. А текст остается все так же далеко