Div отображается в следующем ряду, когда он не был сделан в [закрыто] ⇐ Html

[Anonymous]

Я новичок в CSS, и сейчас я прохожу курс Coursera. Это задание казалось довольно легким, но я столкнулся с проблемой. Насколько я знаю, я установил ширину максимальной и мин для размеров экрана устройства, но даже при самом высоком размере он не отображает все контейнеры в одной строке.* {
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
h1 {
margin-bottom: 15px;
text-align: center;
font-size: 175%;
}
.row {
overflow: hidden;
width: auto;
}
.col-lg-4,
.col-md-6, .col-md-12,
.col-sm-12 {
float: left;
padding: 10px;
}
.sectiontitle {
position: relative;
border: 1px solid black;
background-color: rgb(235, 70, 158);
margin: 5px;
color: rgb(45, 20, 12);
font-size: 125%;
}
.title {
padding: 0;
position: relative;
top:0; right:0;
height: 15px;
}
p {
border: 1px solid black;
background-color: #fff9ef;
width: auto;
height: auto;
margin: 10px;
padding: 5px 5px 5px 5px;
color: rgb(45, 20, 12);
}
@media (min-width: 992px) {
.col-lg-4 {
width: 33.333333%;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6 {
width: 50%;
}
.col-md-12 {
width: 100%;
}
}
@media (max-width: 767px) {
.col-sm-12 {
width: 100%;
}
}
< /code>
Ссылка на полный файл HTML и CSS на GitHub < /p>
Пожалуйста, поправьте меня! Я пытался поиграть со всеми типами покрасной и прокладки в разных областях, но, похоже, не решает проблему. И если возможно, как мне переместить заголовок каждой коробки, чтобы находиться в самой коробке?

Подробнее здесь: https://stackoverflow.com/questions/797 ... ot-made-to