Вывод Div распечатывается вертикально, даже если в предыдущих строках вывод был горизонтальным. ⇐ Html

[Anonymous]

Я пытаюсь создать веб-страницу для проекта, и мне хотелось еще немного расширить ее, поэтому я просто скопировал содержимое существующей страницы.
Все, что находится внутри основного тега, было реализовано так, как я и ожидал. Однако элементы div внутри моей функции галереи отображаются вертикально.
Я пробовал:

• проверить синтаксические ошибки
• проверить несовпадение отступов
• проверить код CSS, указанный в тегах
• перевыравнивание других элементов для проверки ошибок, связанных с шириной или гибкостью
• просим совета у Грока

но ничего не смогли получить от этого. Никакого дополнительного кода, на который ссылаются другие файлы, нет, только изображения или веб-страницы (на которых нет мешающего кода), я использую Notepad++ для редактирования.
Я уже несколько часов пытаюсь решить эту проблему.
Вот код, о котором идет речь:
< !-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
< !-- language: lang-css -->

* {
box-sizing: border-box;
margin: 0px;
}

header {
background-image: url("KBHassets/images/KBH/KBHtexture.png");
padding: 50px;
}

footer {
display: block;
clear: both;
background-color: #5B7A8C;
padding: 25px;
background-image: url("KBHassets/images/KBH/KBHtexture.png");
}

gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
background-color: #5B7A8C;
background-image: url("KBHassets/images/KBH/KBHtexture.png");
}

div.gallery-item {
width: 370px;
margin: 5px;
}

div.gallery-item img {
width: 100%;
height: 250px;
}

div.gallery-item div.desc {
text-align: center;
color: white;
}

div.gallery-item:hover {
background-color: #7593A5;
}

#logo {
border-radius: 10%;
background-color: white;
padding: 10px;
align: center;
}

main {
width: 80%;
float: left;
padding: 20px;
}

#mainfont {
color: white;
text-decoration: none;
background-color: #5B7A8C;
display: block;
float: right;
width: 90%;
}

.mainimg {
width: 10%;
height: 100px;
float: left;
}

main fieldset {
border: none;
background-color: #EEEEEE;
}

main fieldset:hover {
background-color: #C6C6C6;
}

#mainfont-desc {
float: right;
width: 90%;
}

side {
width: 20%;
background-color: #EEEEEE;
float: right;
}

#sidefont {
width: 300px;
color: white;
}

@media screen and (max-width:600px) {

main,
side,
div.gallery {
width: 100%;
}

}






KBH.com











Head title


"a quote"






Sıcak Haber






title_a





title_b





title_c





title_d






title_a

Lorem ipsum

title_b

Lorem ipsum

title_c

Lorem ipsum

title_d

Lorem ipsum

title_a





title_b





title_c





title_d






title_a

Lorem ipsum

title_b

Lorem ipsum

title_c

Lorem ipsum

table_title*

value1


value2


value3


value4


value5




Lorem ipsum.




Подробнее здесь: https://stackoverflow.com/questions/798 ... in-previou