こんにちは。お世話になっております。
トップページに、イベント告知くんを設置する作業を行っております。
https//www.rakuten.ne.jp/gold/SHOP-URL/r-index0613-2.html

Bootstrapの箱の中にいれてみたところ、
PCで見たときには、検索窓とイベント告知くんが並ぶようになり、ブラウザを狭くすると二段になってくれるのですが、スマホで見たときに、検索窓は画面の中央にきちんと配置される一方、イベント告知くんは、右端が見切れてしまいます。
iframeを中央寄せに使用としてみたり、横幅をpxや％に変えてみたり、見切れない様にしてみたのですが、うまくいきません。
どこを触るとよいでしょうか？

<!-- Header section -->
<header class="header-section">
<div class="header-top">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-5">
<form class="header-search-form" name="myForm" method="get" action="https://esearch.rakuten.co.jp/rms/sd/isearch/vc" accept-charset="EUC-JP">
<input type="hidden" name="sid" value="SHOP-ID">
<input type="text" name="sitem" id="sitem" placeholder="何かお探しですか？">
<button><i class="flaticon-search"></i></button>
</form>
</div>
<iframe src="https//www.rakuten.ne.jp/gold/SHOP-URL/rpoint_box/rpoint_box_scroll.html" width="510" height="75" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" hspace="0" vspace="0"></iframe>
</div>
</div>
</div>
</header>
<!-- Header section end -->