iFrame的Css间距问题

Question

连续我有一个iframe谷歌地图，下一行是一个地址，但是iframe会注入一个空格块，并将地址推出页面限制，见图片;

Codepen-示例     https://codepen.io/grabthereef/pen/PJOYaa

HTML;

<section id="map-section">
                <div class="row">
                    <div class="col-9">
                        <div class="google-map">
                            <iframe src=""
                            height="200" width="100%"
                            frameborder="0" style="border:0"
                            allowfullscreen></iframe>
                        </div>
                    </div>
                    <div class="bg-warning col-3">
                        <div class="home-address">
                            <p class="address">
                                Address 1
                                Address 2<br>
                                33-655<br>
                            </p>
                        </div>
                    </div>
                </div>
            </section>

CSS;

#map-section {
    .google-map{
        float: left;
        width: 100%;
    }

    .address{
        font: 2em "Caveat";
        text-align: center;
        text-shadow: 1px 1px 0 rgba(0,0,0,.3);
        padding-top: 2.5em;
        padding-left: 0em;
    }
}

Answer 1

我通过添加'overflow-x：hidden;'解决了这个问题。所以;

html,body {
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}