CSS Круг за изображением занимает всю ширину контейнера

Question

Я пытаюсь получить круг позади lo go, используя CSS, но борюсь, поскольку он продолжает занимать всю ширину контейнера.

https://jsfiddle.net/leelawtondesign/hfqk6a0g/5/# & togetherjs = HAg4AK4vSo

Вот как это выглядит ...

Вот как это должно выглядеть ...

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="row">


    <div class="col-12 col-md-3 my-auto order-2 order-md-1">
      <div class="pt-5 pt-md-3 d-flex justify-content-center">
        <div class=""></div>
        <a href="https://www.facebook.com"><button type="button" class="btn btn-social-icon btn-facebook btn-rounded mx-2"><i class="fa fa-facebook"></i></button></a>
        <a href="https://www.facebook.com"><button type="button" class="btn btn-social-icon btn-twitter btn-rounded mx-2"><i class="fa fa-twitter"></i></button></a>
        <a href="https://www.facebook.com"><button type="button" class="btn btn-social-icon btn-instagram btn-rounded mx-2"><i class="fa fa-instagram"></i></button></a>
      </div>
    </div>


    <div class="col-12 col-md-6 order-1 order-md-2 logo d-flex position-relative">
      <img class="pt-3 pt-md-5 pb-4 pb-md-5 m-auto align-content-center" src="img/safety_first_logo.png">
    </div>


    <div class="pt-3 pt-md-0 col-12 col-md-3 text-right my-auto order-3 d-flex justify-content-center justify-content-md-end">
      <i class="fas fa-phone px-2"></i> <a href="tel:07481755545">07460162247</a>
    </div>

  </div>
</div>