Нижний колонтитул не показывает карту Google iframe, используя полную ширину

Question

Я использую wordpress и Better Health тему.

Я пытаюсь добавить встраивать карту Google iframe в область нижнего колонтитула, но даже если я установил ширину и высоту, вместо этого карта отображается, как показано ниже:

Можете ли вы помочь мне, пожалуйста?

Это мой iframe:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6523.972232754733!2d33.313468!3d35.156967!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x552d685f196ffa7c!2zzpnOkc6kzqHOmc6azp8gzprOlc6dzqTOoc6fICLOnyDOkc6gzp_Oo86kzp_Om86fzqMgzpvOn86lzprOkc6jIg!5e0!3m2!1sen!2sus!4v1525091450028" width="800" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Вот мой нижний колонтитул:

/************************************
16)Footer top
*************************************/
.footer-top {
    padding: 0 0 25px;
    background-color: #1a1e21;
    color: #7e7e7e;
    font-size: 14px !important;
}

.footer-top p {
    font-size: 14px;
    margin-bottom: 0;
}

.footer-top-box {
    margin: 30px auto;
    overflow: hidden;
}

.footer-top h4 {
    color: #fff;
    text-transform: capitalize;
}
.footer-top-box li{
    padding: 5px 0 10px 0;
    border-bottom: 1px dotted #333;
}
.footer-top-box li:last-child{
    border-bottom: 0!important;
}
.footer-top-box h5{
    margin-bottom: 5px;
}
.footer-top-box .widget-img-thumb {
    display: inline-block;
    float: left;
    margin-right: 15px;
    width: 60px;
}

.footer-top-box .widget-content {
    overflow: hidden;
}
.footer-top-box .widget-date{
    font-size: 12px;
}
.footer-top .input-holder {
    position: relative;
}

.footer-top .input-holder input[type="email"] {
    width: 100%;
    display: inline-block;
    border: 0;
    border-radius: 0;
    height: 39px;
    padding: 10px 20px;
}

.footer-top .input-holder label {
    position: absolute;
    top: 0;
    right: -4px;
    text-align: center;
    cursor: pointer;
}

.footer-top .input-holder label i {
    position: absolute;
    top: 9px;
    left: 8px;
    font-size: 20px;
    color: #fff;
}

.footer-top .input-holder input[type="submit"] {
    color: #fff;
    border: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 20px;
    line-height: 0;
    text-indent: -999px;
}

.footer-top .submit-bgcolor {
    background-color: #00aef0;
}

.footer-top ul {
    list-style-type: none;
    padding-left: 0;
}

.footer-top ul li {
    margin: 0 0 10px 0;
}

.footer-top ul li a {
    color: #7e7e7e;
}

.footer-top ul li a:hover {
    color: #fff;
}

.tag a {
    margin: 5px;
    color: #7e7e7e;
    padding: 5px;
    float: left;
    border: 1px solid #7e7e7e;
}

.tag a:hover {
    color: #fff;
    border: 1px solid #fff;
}

Вот мой html код:

<section id="text-6" class="widget widget_text">            <div class="textwidget"><p><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6523.972232754733!2d33.313468!3d35.156967!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x552d685f196ffa7c!2zzpnOkc6kzqHOmc6azp8gzprOlc6dzqTOoc6fICLOnyDOkc6gzp_Oo86kzp_Om86fzqMgzpvOn86lzprOkc6jIg!5e0!3m2!1sen!2sus!4v1525091450028" frameborder="0" style="border:0" allowfullscreen></iframe></p>
</div>
        </section> 

Answer 1

Добавьте предоставленный файл в пользовательскую настройку> Дополнительный CSS (или в какой-нибудь файл .css, в параметры своей темы. Пользовательская часть CSS или что-то в этом роде):

#text-6 iframe {
   height: 450px;
   width: 800px;
}