Целевая страница проекта Odin не может отображать синие прямоугольники рядом друг с другом по горизонтали ⇐ Html

[Anonymous]

Я не могу расположить синие прямоугольники на моей веб-странице рядом друг с другом по горизонтали. Не знаю, почему это происходит, потому что у меня есть display: flex и flex-direction: row для класса .box-cover. Я новичок в CSS; извините за вопрос для начинающих.
Я установил ширину .box-cover на 25 % и включил border-box, но он все равно не работает.

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

* {
font-family: Roboto, sans-serif;
color: #f9faf8;
}

h2 {
font-size: 24px;
font-weight: 900;
color: #f9faf8;
}

nav {
display: flex;
justify-content: space-around;
align-items: center;

}

nav ul {
display: flex;
justify-content: space-between;
width: 40%;
}

nav ul li {
list-style-type: none;
font-size: 18px;
color: #e5e7eb;
}

.hero {
font-size: 48px;
}

button {
background-color: #3882f6;
border-radius: 5px;
}

#section1 {
background-color: #1f2937;
width: 100%;
height: 25vh;
}

#section2 {
background-color: #f9faf8;
width: 100%;
height: 25vh;
color: #1f2937;
}

.box {
border: 1px solid #3882f6;
padding: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
}

.box-cover {
display: flex;
flex-direction: row;
width: 25%;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
}

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

Header Logo
[list]
[*]Header link one
[*]Header link two
[*]Header link three
[/list]


This website is awesome
text here
sign up



Some random information

















sign up

Подробнее здесь: https://stackoverflow.com/questions/794 ... orizontall