Было бы лучше, если бы вы проверили код в редакторе, чтобы увидеть его, но вот быстрое объяснение: я действительно не понимаю, что создает пробел между двумя div s - текстовыми проектами и галереей. Они находятся внутри flexbox div с обоснованным содержанием: пространство между ними, и между ними огромный разрыв. После проверки сайта вы можете увидеть, что это проблема галереи.
Я попытался удалить поля и отступы для изображений, а для div, и это не работает. Я искал его в течение долгого времени, и я не могу найти его, помощь будет значительно сокращена
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>People</title>
<link rel='stylesheet' href='styles/styles.css'>
</head>
<body>
<header>
<div class='logo'>LOGO</div>
<ul class='navbar'>
<li><a class='light' href='./home.html'>Home</a></li>
<li><a href='./projects.html'>Projects</a></li>
<li><a href='./contact.html'>Contact</a></li>
</ul>
</header>
<div class='wholeprojects'>
<div class='textprojects'>
<h1>Ut enim ad minima.</h1>
<p>Quis nostrum exercitationem ullam corpori suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur.
Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo
</p>
</div>
<div class='gallery'>
<div class="row">
<div class="column">
<img src="images/gallery1.jpg" style="width:90%">
<p>Sed ut perspiciatis omnis</p>
</div>
<div class="column">
<img src="images/gallery2.jpg" style="width:90%">
<p>Sed ut perspiciatis omnis</p>
</div>
<div class="column">
<img src="images/gallery3.jpg" style="width:90%">
<p>Sed ut perspiciatis omnis</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="images/gallery1.jpg" style="width:90%">
<p>Sed ut perspiciatis omnis</p>
</div>
<div class="column">
<img src="images/gallery2.jpg" style="width:90%">
<p>Sed ut perspiciatis omnis</p>
</div>
<div class="column">
<img src="images/gallery3.jpg" style="width:90%">
<p>Sed ut perspiciatis omnis</p>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
.wholeprojects {
padding-top: 5em;
display: flex;
justify-content: space-between;
width: 85%;
margin: 0px auto;
}
.textprojects {
width: 25% !important;
}
.row {
margin-top: 3em;
width: 70%;
float: right;
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
p {
color: $textColorgrey;
font-weight: 400;
font-style: italic;
font-size: 0.8em;
}
img {
filter: brightness(95%);
transition: transform 0.05s;
&:hover {
transform: scale(1.03);
}
}
}
</style>