Centered Side By Side Boxes

Question

I've been trying to learn how to code TWO side by side boxes, that are centered. I've tried the float: left and all, it just doesn't center it. I need it centered, not one box all the way to the left, and the other to the right. Any help? CSS, not in html please.

.boxcontainer {
  background: none;
  height: 275px;padding: 35px;
}

.Box1 {
  background: rgba(137,20,20);
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
  float: center;
  height: 200px;
  width: 200px;
  padding: 15px;
  overflow: auto;
  transition: 0.65s
}

.Box2 {
  background: rgba(137,20,20);
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
  float: center;
  height: 200px;
  width: 200px;
  padding: 15px;
  overflow: auto;
  transition: 0.65s
}

Answer 1

i added display:flex;justify-content:center in .boxcontainer

 .boxcontainer {background: none;height: 275px;padding: 35px;display:flex;justify-content:center} .Box1 {background: rgba(137,20,20);border: 1px solid black;border-radius: 5px;margin: 5px;float: center;height: 200px;width: 200px;padding: 15px;overflow: auto;transition: 0.65s} .Box2 {background: rgba(137,20,20);border: 1px solid black;border-radius: 5px;margin: 5px;float: center;height: 200px;width: 200px;padding: 15px;overflow: auto;transition: 0.65s} 

 <div class="boxcontainer"> <div class="Box1"></div> <div class="Box2"></div> </div>