当文字在地图旁边浮动时，我的地图正在缩小？？ HTML/CSS

Question

所以我有一段文字漂浮在地图旁边。由于某种原因，地图被缩小了，就像我在它应该是 70% 的时候放了填充或边距。有人可以帮忙吗？这是代码..

body{
    background-color: lightblue;
}

.footer #map{
    float: left;
}

.footer p{
    background: transparent;
}

.footer{
    height: auto;
    width: auto;
    padding: 40px 10% 0 10%;
    font-size: 21px;
}

.footer iframe{
    padding: 0;
    margin: 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="footer">
            <div id="map">
                <iframe width='70%' height='400px' id='mapcanvas' src='https://maps.google.com/maps?q=tomislavova%20ulica%20zagreb%20hrvatska&amp;t=&amp;z=10&amp;ie=UTF8&amp;iwloc=&amp;output=embed' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'><div class="zxos8_gm"><a href="https://downloadyou.tube/download/windows/">Windows version for Youtube</a></div><div style='overflow:hidden;'><div id='gmap_canvas' style='height:100%;width:100%;'></div></div><div><small>Powered by <a href="https://www.embedgooglemap.co.uk">Embed Google Map</a></small></div></iframe>
            </div>
            <p>Location and Contact Information<br>Working hours<br>MON - THU: 08.00 - 17.00</p>
        </div>
</body>
</html>

Answer 1

body{
    background-color: lightblue;
}

.footer #map{
    float: left;
    display:flex;
    width:100%;
}

.footer #map p{
    background: transparent;
    display: inline-block;
    width: 29%;
    padding: 0 10px;
    margin: 0;
}

.footer{
    height: auto;
    width: auto;
    padding: 40px 10% 0 10%;
    font-size: 21px;
}

.footer iframe{
    padding: 0;
    margin: 0;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="footer">
            <div id="map">
                <iframe width='70%' height='400px' id='mapcanvas' src='https://maps.google.com/maps?q=tomislavova%20ulica%20zagreb%20hrvatska&amp;t=&amp;z=10&amp;ie=UTF8&amp;iwloc=&amp;output=embed' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'><div class="zxos8_gm"><a href="https://downloadyou.tube/download/windows/">Windows version for Youtube</a></div><div style='overflow:hidden;'><div id='gmap_canvas' style='height:100%;width:100%;'></div></div><div><small>Powered by <a href="https://www.embedgooglemap.co.uk">Embed Google Map</a></small></div></iframe>
 <p>Location and Contact Information<br>Working hours<br>MON - THU: 08.00 - 17.00</p>
            </div>
           
        </div>
</body>
</html>

当文字在地图旁边浮动时，我的地图正在缩小？？ HTML/CSS

My map is shrinking when text is sloated next to it?? HTML/CSS

html

css

dictionary

iframe

footer