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

[Anonymous]

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

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

но ничего не смог получить от этого. нет никакого дополнительного кода, на который ссылаются другие файлы, только изображения или веб-страницы (на которых нет мешающего кода), я использую Notepad++ для редактирования.
~~я уже несколько часов пытаюсь решить эту проблему.~~
вот код, о котором идет речь

KBH.com





*
{
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%;
}

}










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