Adding padding or margin breaks 3 column float

Question

I'm just starting out and I've spent a few hours on this and can't come up with the solution. I have a 3 column layout that breaks when I try to add margin or padding between the columns.

I would like the 3 columns to all be on the same row when the browser is above 992px. Between 768px and 991px, I would like the first 2 columns to take up 50% of the top row and the 3rd column to go under and take up 100% of the screen width. Anything less than 767px should just stack on top of eachother.

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.h1 {
  text-align: center;
}

.row>div {
  margin: 10px;
}

.itemname {
  float: right;
  background-color: gold;
  margin-top: 0;
  text-align: center;
  font-size: 1.5em;
  border: 1px solid gray;
  height: 30px;
  width: 100px;
}

.desc {
  padding: 20px 10px 20px 10px;
}

@media (min-width: 992px) {
  .item1,
  .item2,
  .item3 {
    float: left;
    width: 33.3%;
    border: 1px solid gold;
    background-color: bisque;
    /*margin: 10px;*/
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .item1,
  .item2 {
    float: left;
    width: 50%;
    border: 1px solid gold;
    background-color: bisque;
  }
  .item3 {
    float: left;
    width: 100%;
    border: 1px solid gold;
    background-color: bisque;
  }
}

<h1 class="h1">Our Menu</h1>
<div class="row">
  <div class="item1">
    <p class="itemname">Chicken</p>
    <p class="desc">Item Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti quod asperiores, doloribus expedita quam officia perferendis qui consectetur enim!</p>
  </div>
  <div class="item2">
    <p class="itemname">Beef</p>
    <p class="desc">Item Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti quod asperiores, doloribus expedita quam officia perferendis qui consectetur enim!</p>
  </div>
  <div class="item3">
    <p class="itemname">Sushi</p>
    <p class="desc">Item Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti quod asperiores, doloribus expedita quam officia perferendis qui consectetur enim!</p>
  </div>
</div>

Answer 1

I removed unnecessary floats and set the .row class to use flexbox for layout. The .row class now has flex-wrap: wrap; to allow items to wrap onto new lines as needed.

I adjusted the widths of the items within the media queries to achieve the desired layout at different screen sizes. The widths are set using percentages and calculated values to account for margins between items.

I removed the float property from .item1, .item2, and .item3 to allow flexbox to handle the layout.

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.h1 {
    text-align: center;
}

.row>div {
    margin: 10px;
}

.itemname {
    background-color: gold;
    margin-top: 0;
    text-align: center;
    font-size: 1.5em;
    border: 1px solid gray;
    height: 30px;
    width: 100px;
}

.desc {
    padding: 20px 10px 20px 10px;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.item1,
.item2,
.item3 {
    width: 100%;
    border: 1px solid gold;
    background-color: bisque;
}

@media (min-width: 768px) {
    .item1,
    .item2 {
        width: calc(100% / 2 - 20px)
    }

    .item3 {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .item1,
    .item2,
    .item3 {
        width: calc(100% / 3 - 20px);
    }
}

Here working jsfiddle:

https://jsfiddle.net/5c0oaz83/