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

[Anonymous]

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

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

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

Код: Выделить всё

* {
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
 & l t ; m e t a   c h a r s e t = " u t f - 8 " & g t ; < b r   / > & l t ; h e a d e r & g t ; < b r   / >     & l t ; t a b l e & g t ; < b r   / >         & l t ; t r & g t ; < b r   / >             & l t ; t d & g t ; & l t ; i m g   s r c = " K B H a s s e t s / i m a g e s / K B H / K B H L o g o . p n g "   a l t = " l o g o "   i d = " l o g o "   w i d t h = " 1 5 0 "   h e i g h t = " 2 2 0 " & g t ; & l t ; / t d & g t ; < b r   / >         & l t ; / t r & g t ; < b r   / >     & l t ; / t a b l e & g t ; < b r   / > < b r   / >     & l t ; h e a d & g t ; < b r   / >         & l t ; h 1   i d = " s i d e f o n t " & g t ; H e a d   t i t l e & l t ; / h 1 & g t ; < b r   / >     & l t ; / h e a d & g t ; < b r   / >     & l t ; b r & g t ; < b r   / >     & l t ; h 3   i d = " s i d e f o n t " & g t ; " a   q u o t e " & l t ; / h 3 & g t ; < b r   / >     & l t ; b r & g t ; & l t ; b r & g t ; < b r   / > & l t ; / h e a d e r & g t ; < b r   / > & l t ; h r & g t ; < b r   / > & l t ; h r & g t ; < b r   / > & l t ; h r & g t ; < b r   / > < b r   / > & l t ; b o d y & g t ; < b r   / >     & l t ; h 2   a l i g n = " c e n t e r " & g t ; S ı c a k   H a b e r & l t ; / h 2 & g t ; < b r   / >     & l t ; b r & g t ; < b r   / >     & l t ; g a l l e r y & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; a   t a r g e t = " _ b l a n k "   h r e f = " h t t p : / / l o c a l h o s t / K B H a s s e t s / s u b - p a g e s / a . h t m l " & g t ; & l t ; i m g   s r c = " K B H a s s e t s / i m a g e s / c o m m u n i t y / a . p n g "   a l t = " a "   w i d t h = " 3 0 0 "   h e i g h t = " 2 0 0 " & g t ; & l t ; / a & g t ; < b r   / >             & l t ; d i v   c l a s s = " d e s c " & g t ; t i t l e _ a & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; a   t a r g e t = " _ b l a n k "   h r e f = " h t t p : / / l o c a l h o s t / K B H a s s e t s / s u b - p a g e s / b . h t m l " & g t ; & l t ; i m g   s r c = " K B H a s s e t s / i m a g e s / c o m m u n i t y / b . p n g "   a l t = " b "   w i d t h = " 3 0 0 "   h e i g h t = " 2 0 0 " & g t ; & l t ; / a & g t ; < b r   / >             & l t ; d i v   c l a s s = " d e s c " & g t ; t i t l e _ b & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; a   t a r g e t = " _ b l a n k "   h r e f = " h t t p : / / l o c a l h o s t / K B H a s s e t s / s u b - p a g e s / c . h t m l " & g t ; & l t ; i m g   s r c = " K B H a s s e t s / i m a g e s / c o m m u n i t y / c . p n g "   a l t = " c "   w i d t h = " 3 0 0 "   h e i g h t = " 2 0 0 " & g t ; & l t ; / a & g t ; < b r   / >             & l t ; d i v   c l a s s = " d e s c " & g t ; t i t l e _ c & l t ; / d i v & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; a   t a r g e t = " _ b l a n k "   h r e f = " h t t p : / / l o c a l h o s t / K B H a s s e t s / s u b - p a g e s / d . h t m l " & g t ; & l t ; i m g   s r c = " K B H a s s e t s / i m a g e s / c o m m u n i t y / d . p n g "   a l t = " d "   w i d t h = " 3 0 0 "   h e i g h t = " 2 0 0 " & g t ; & l t ; / a & g t ; < b r   / >             & l t ; d i v   c l a s s = " d e s c " & g t ; t i tle_d




[img]KBHassets/images/community/a.png[/img]
[url=http://localhost/KBHassets/sub-pages/a.html]
title_a
[/url]
[h4]Lorem ipsum[/h4]



[img]KBHassets/images/community/b.png[/img]
[url=http://localhost/KBHassets/sub-pages/b.html]
title_b
[/url]
[h4]Lorem ipsum[/h4]



[img]KBHassets/images/community/c.png[/img]
[url=http://localhost/KBHassets/sub-pages/c.html]
title_c
[/url]
[h4]Lorem ipsum[/h4]



[img]KBHassets/images/community/d.png[/img]
[url=http://localhost/KBHassets/sub-pages/d.html]
title_d
[/url]
[h4]Lorem ipsum[/h4]




[url=http://localhost/KBHassets/sub-pages/a.html]
[img]KBHassets/images/community/a.png[/img]
[/url]
title_a


[url=http://localhost/KBHassets/sub-pages/b.html]
[img]KBHassets/images/community/b.png[/img]
[/url]
title_b


[url=http://localhost/KBHassets/sub-pages/c.html]
[img]KBHassets/images/community/c.png[/img]
[/url]
title_c


[url=http://localhost/KBHassets/sub-pages/d.html]
[img]KBHassets/images/community/d.png[/img]
[/url]
title_d




[img]KBHassets/images/community/a.png[/img]
[url=http://localhost/KBHassets/sub-pages/e.html]
title_a
[/url]
[h4]Lorem ipsum[/h4]



[img]KBHassets/images/community/b.png[/img]
[url=http://localhost/KBHassets/sub-pages/f.html]
title_b
[/url]
[h4]Lorem ipsum[/h4]



[img]KBHassets/images/community/c.png[/img]
[url=http://localhost/KBHassets/sub-pages/g.html]
title_c
[/url]
[h4]Lorem ipsum[/h4]





table_title*

value1


value2


value3


value4


value5




Lorem ipsum.

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