Bootstrap5, как подвинуть элемент в колонке

возникла проблема, гугл карта заходит за текст, в html подключен bootstrap, пробовал через margin-left не работает. Сайт делаю на фреймворке фласк.

Вот код элемента:

<div class="hero-wrap" style="background-image: url('images/bg_1.jpg');" data-stellar-background-ratio="0.5">
  <div class="overlay"></div>
  <div class="container">
    <div class="row no-gutters slider-text align-items-center justify-content-start" data-scrollax-parent="true">
      <!--Гугл карта-->  
      <div class="col-lg-3 col-md-2 mt-0 mt-md-2">
          <iframe src="{{info.messfee}}" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
        </div>
      <div class="col-lg-1 col"></div>
      <div class="col-lg-4 col-md-6 ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
        <h1 class="mb-4" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">Объект: {{info.hname}}  <br><span>  </span></h1>
        <p class="mb-4" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">{{info.fee}}<span class="icon-calendar mr-2"></span></p>
        <div id="timer" class="d-flex">
        </div>
    </div>