如何修复 div alignment 问题？

Question

I'm working on a website in which at the bottom you can see the three social media accounts it has, but with the following code, this is the output, but I don't know what's causing it.

As you can clearly see, there is a grey box going over the three boxes, and I don't know how to fix this.

 .container { width: 600px; height: 190px; background-color: #ff7675; padding-top: 20px; padding-left: 15px; padding-right: 15px; } #st-box { float: left; width: 180px; height: 160px; background-color: white; border: solid black; } #nd-box { float: left; width: 180px; height: 160px; background-color: white; border: solid black; margin-left: 20px; } #rd-box { float: right; width: 180px; height: 160px; background-color: white; border: solid black; }

 <div class="container"> <div id="st-box"> <iframe></iframe> </div> <div id="nd-box"> <iframe></iframe> </div> <div id="rd-box"> <iframe></iframe> </div> </div>

What can I do?

Answer 1

You should style your iframes. Here is some code that will help you on your way.

 iframe {
    display: block;
    width: 100%;
    border: 0;
  }

Answer 2

The iframes inside your inner divs are causing these strange-looking borders. You can style them with css aswell.

For example, you might want to give them:

border:0;
width:100%;

Answer 3

The browser adds a default border to iframe. Give border: 0 to the iframe. Check screenshot.

iframe { border: 0; }