CSS Responsive Layout help: Div not staying on the same line

I'm in the beginnings of teaching myself how to code and working on an assignment to create a responsive site but can't use frameworks like Twitter bootstrap or any of the new grid properties. The problem is I'm trying to get 3 divs to align for devices with a min-width of 992px and for devices with a min-width of 768px and a max-width of 991px, I'm trying to get two across the two and one at the bottom. With my current code, I can get 3 across the top but when I go to tablet devices I'm getting all 3 laid vertically and taking 50% of the screen.

I've tried adjusting the width property, removing padding and margins, adding an overarching div with the class of "container", border box, removing and adding the float property.

Here's my current CSS code and image of what's expected.

*{
    box-sizing: border-box;
  }

body {
    background-color: white;
    margin: 0px;
}
h1 {
    color: black;
    text-align: center;
}

.container {
    width: 100%;
}

section {
    background-color: gray;
    border: 1px solid black;
    margin: 5px;
}
p#description {
    /*text-align: left;*/
    /*font-weight:100;*/
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    /*padding-bottom: 0px;*/
    height: 250px;
}
p#suboptions {
    float: right;
    border-left: 1px solid black;
    border-bottom: 1px solid black;
}
p.chick {
    background-color: lightpink;
    color:black;
    text-align: center;
    font-size: large;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    width: 25%;
    margin-top: 0px;
    padding: 5px;
}
p.beef {
    background-color:maroon;
    color: white;
    text-align: center;
    font-size: large;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    width: 25%;
    margin-top: 0px;
    padding: 5px;
}
p.sushi {
    background-color: blanchedalmond;
    color:black;
    text-align: center;
    font-size: large;
    font-weight: bold;
    font-family: 'Times New Roman', Times, serif;
    width: 25%;
    margin-top: 0px;
    padding: 5px;
}

@media (min-width: 768px) and (max-width: 991px) { 
/*tablets*/
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
section {
    float: left;
    margin: 5px;
}
p#description {
    height: 170px;
}
}

@media (min-width: 992px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
      float: left;}
.col-lg-1 {width: 8.33%;}
.col-lg-2 {width: 16.66%;}
.col-lg-3 {width: 25%;}
.col-lg-4 {width: 33.33%;}
.col-lg-5 {width: 41.66%;}
.col-lg-6 {width: 50%;}
.col-lg-7 {width: 58.33%;}
.col-lg-8 {width: 66.66%;}
.col-lg-9 {width: 75%;}
.col-lg-10 {width: 83.33%;}
.col-lg-11 {width: 91.66%;}
.col-lg-12 {width: 100%;}
}

So after 992px you can use FlexBox to align all items horizontally in a row.

Between 768px and 992 you can use CSS Grid to create 2x2 grid and third box will span in 2nd row.

.container {
  height: 100vh;
  max-width: 1100px;
  margin: 0 auto;
}

.box-1 {
  background-color: red;
}

.box-2 {
  background-color: green;
}

.box-3 {
  background-color: blue;
}

@media screen and (min-width: 992px) {
  .container {
    display: flex;
    flex-direction: row;
    padding: 5rem;
  }

  .container > * {
    flex: 1;
    height: 300px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 5rem;
  }

  .box-3 {
    grid-column: 1 / span 2;
  }

<div class="container">
      <div class="box-1"></div>
      <div class="box-2"></div>
      <div class="box-3"></div>
</div>