Why my box container does not have the same size and not in the middle of the screen

Question

Assigments example hey I am new to programming and I have this assigment using simple grid framework css and I am not allowed to use bootstrap nor javascript. So I tried to change the size to 30% yet my container isn't placed in the middle and I changed it to 100:3 = 33.33%, 66.66%, 100% but instead my box doesn't have the same size

.table {
  border: 1px solid black;
  background-color: gray;
  width: 100%;
  height: 150px;
  margin right: auto;
  margin-left: auto;
  float: left;
  overflow: hidden;
}

.row {
  width: 100%;
}

@media (min-width: 1200px) {
  .col-lg-1,
  .col-lg-2,
  .col-lg-3 {
    float: left;
    border: 1px purple;
  }
  .col-lg-1 {
    width: 33.33%;
  }
  .col-lg-2 {
    width: 66.66%;
  }
  .col-lg-3 {
    width: 100%;
  }
}

.food {
  text-align: center;
  width: 120px;
  background-color: blue;
  float: right;
}

.desc {
  padding: 10px;
  float: left;
}

<div class="row">

  <div class="col-lg-1 table">
    <div class="food" id="chicken">Chicken</div>
    <div class="desc"> Lorem ipsum dolor sit amet, consectur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitaion ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

  <div class="col-lg-2 table">
    <div class="food" id="beef">Beef</div>
    <div class="desc"> Lorem ipsum dolor sit amet, consectur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitaion ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

  <div class="col-lg-3 table">
    <div class="food" id="sushi">Sushi</div>
    <div class="desc"> Lorem ipsum dolor sit amet, consectur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitaion ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>

Answer 1

First if you want them to have same width, you should set width of col1, col2, and col3 all to 33.33%.

.col-lg-1 {
  width: 33.33%;
}

.col-lg-2 {
  width: 33.33%;
}

.col-lg-3 {
  width: 33.33%;
}

https://jsfiddle.net/ramseyfeng/3prz6awt/

BTW, i would suggest you to try flex to do the layout things, i just create a simple layout for your scenario:

https://jsfiddle.net/ramseyfeng/8fps0wuv/