Проблемы адаптивного веб-дизайна ⇐ CSS

[Anonymous]

Я работаю над сайтом-макетом ресторана с адаптивным дизайном. Однако у меня есть несколько проблем: 1.) Мои разделы (Закуски, Первые блюда, Десерты) не центрированы в контейнере/веб-странице. 2.) Когда я сворачиваю экран, чтобы применить адаптивность, мои разделы не отвечают. Любая помощь? Код ниже:

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

        


Appetizers

Lorem ipsum dolor sit amet





Appetizers

Lorem ipsum dolor sit amet





Appetizers

Lorem ipsum dolor sit amet

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

body {
padding-bottom: 20px;
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family:Georgia, 'Times New Roman', Times, serif;
}

*{
box-sizing: border-box;
}

header{
text-align: center;
font-size: 1.25em;
margin-bottom: 30px;
}

section{
background-color:darkslategray;
margin-left: auto;
margin-right: auto;
}

.Options{
width: 1000px;
}

#food-options{
text-align: right;
border: 2px solid white;
margin: 15px;
justify-content: center;
align-items: center;
}

p{
width: 90%;
text-align: center;
margin-right: auto;
margin-left: auto;
font-size: 1em;
}

div{
display: inline-block;
}

#Appetizers{
background-color:chocolate;
border: 1px solid black;
font-size: 1.25em;
}

#Entrees{
background-color:chocolate;
border: 1px solid black;
font-size: 1.25em;
}

#Desert{
background-color:chocolate;
border: 1px solid black;
font-size: 1.25em;
}

/*Large Devices*/
@media(min-width: 992px){
.col-lg-12{
float:left;
}
.col-lg-12{
width: 100%;
}
}

/*Medium Devices*/
@media(min-width: 767px) and (max-width: 992px){
.col-md-12{
float: left;
}
.col-md-12{
width: 100%;
}
}

/*Small Devices*/
@media(max-width: 767px){
.col-sm-12{
float: left;
}
.col-sm-12{
width: 100%;
}
}

Я думаю, что это может быть как-то связано с «float: left», но когда установлено «float:none», «background-color» выходит за границы раздела.

Подробнее здесь: https://stackoverflow.com/questions/785 ... ign-issues