i want to place boxes to be near each other using css with space between-CodePudding

i need the boxes to be near each other with a bit of space between but it doesn't seem to work, here's my code

HTMl:

<div className="RoundBox"></div> 
<div className="RoundBox2"></div>

CSS:

.RoundBox {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
}

.RoundBox2 {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
  padding-left: 20vw;
}

CodePudding user response：

Add margin-right and margin-left to boxes.

.RoundBox {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;

  margin-right: 10px;
}

.RoundBox2 {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
  padding-left: 20vw;
  
  margin-left: 10px;
}

CodePudding user response：

Add small amount of margin-left and margin-right like 2 or 3 pixels to both boxes.

.RoundBox {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
  margin-left: 2px;
  margin-right: 2px;

}

.RoundBox2 {
  border-radius: 10px;
  border: 1.5px solid grey;
  box-shadow: #e3eaf6;
  width: 20vw;
  height: 3vw;
  float: left;
  padding-left: 20vw;
  margin-left: 2px;
  margin-right: 2px;
}