안녕하세요. 배운 코드를 응용하여 제 코드를 만들고 있는데 도움이 필요합니다.

위와 같이 까만색 태두리 div에 (float-container) 빨간 테두리 div 두개를 왼쪽(float-child) 오른쪽에(float-child2) 넣어 둘이 나란히 있었으면 하는데 안됩니다. 말풍선의 마진 때문인 듯 한데 양 옆 마진을 바꾸면 말풍선이 사진 중앙에 오지 않습니다. 어떻게 해야 할까요? 다른 해결방법이 있을까요?

.float-container {
  border: 3px solid #000000;
  padding: 10px;
  width: auto;
}


.float-child {
  width: 50%;
  float: left;
  padding: 0px;
  border: 2px solid red;
}  

.float-child2 {
  width: 50%;
  float: right;
  padding: 0px;
  border: 2px solid red;
}  

-------html----------
let advisorImage = ['<img src=img/New_Henry.jpg width="270px" height="200px">','<img src="img/New_James.jpg" width="270px" height="200px">']
let bubble = ['class="box1 sb9"', 'class="box2 sb9"']
let quote = ['<p class="text-delay">I AM 60% CERTAIN</p> <p class="text-delay-appear">that it will be lower than 12 degrees Celsius</p>', '<p class="text-delay">THERE IS A 60% PROBABILITY</p> <p class="text-delay-appear">that it will be lower than 12 degrees Celsius</p>'];
let name = ['<b>HENRY</b>', '<b>JAMES</b>']

    <div class="float-container">
      <div class="float-child">
        <div `+ bubble[0]+`>
          ` + quote[0] + `
        </div>
        <div>
          `+ advisorImage[0]+`
        </div>
        <div>
          `+ name[0] +`
        </div>
      </div>
      <div class="float-child2">
        <div `+bubble[1]+`>
          ` + quote[1] + `
        </div>
        <div>
          `+ advisorImage[1]+`
        </div>
        <div>
          `+ name[1] +`
        </div>
      </div>
    </div>