Убрать горизонтальное пространство между 2 divs.Margin не работает?

Question

У меня есть div (.videos1), который включает в себя 2 div (.test и .test1). Я хочу удалить пробел между этими 2 div, используя margin-left / right: 0px, но он не работает, возможно из-за мне нужно 2 деления в центре с пробелом.

HTML:

<div class="videos1">

<div class="test"><img src="img1.jpg"></div><div class="test1"><img src="img2.jpg"></div>
</div>

CSS:

.videos1{
    text-align: center; 
    width:100%;
    height: 100%;
    display:inline-block;
        text-align: center;

}

.test{   

 float:left;
    width:100%;
    height: 100%;



}

.test1{
 float:right; /* I used float:left,but it's not my wanted result */
    width:100%;
    height: 100%;

}

Answer 1

Flexbox может сделать это.

.flex {
  display: flex;
  justify-content: center;
  background: #eee;
  width: 100%;
}
.box1, .box2 {
  width: 200px;
  height: 150px;
  background: red;
}
.box2 {
  margin-left: 20px;
  background: orange;
}

<div class="flex">
  <div class="box1"></div>
  <div class="box2"></div>
</div>