I’ve been working on a restaurant mockup site that focuses on responsive design. However I’m having a few issues: 1.)My sections (Appetizers, Entrees, Deserts) are not centered in the container/webpage. 2.) When I minimize my screen to apply the responsiveness, my sections don’t respond. Any help? Code below:

        <section class="Options">
          <section class="col-lg-12 col-md-12 col-sm-12" id="food-options">
              <div>
              <div id="Appetizers">Appetizers</div>
              <p>
                Lorem ipsum dolor sit amet
              </p>
          </div>
          </section>
          <section class="col-lg-12 col-md-12 col-sm-12" id="food-options">
              <div>
              <div id="Appetizers">Appetizers</div>
              <p>
                Lorem ipsum dolor sit amet
              </p>
          </div>
          </section>
          <section class="col-lg-12 col-md-12 col-sm-12" id="food-options">
              <div>
              <div id="Appetizers">Appetizers</div>
              <p>
                Lorem ipsum dolor sit amet
              </p>
          </div>
          </section>
        </section>

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

I believe this may have something to do with “float: left”, but when it’s “float:none” the “background-color” bleeds past the section borders.