How to add indentation to a link?

Question

css

Hello! I have such a problem. I have elements that in bootstrap are nested in row like this:

<header>
    <nav>
      <div class="container">
        <div class="row menuBtns">
          <div class="col-lg-2"><a href="">главная</a></div>
          <div class="col-lg-2"><a href="">о нас</a></div>
          <div class="col-lg-2"><a href="">производство</a></div>
          <div class="col-lg-3"><a href="">контакты</a></div>
          <div class="col-lg-1"></div>
          <div class="col-lg-2"><a href="">позвонить</a></div>
        </div>
      </div>
    </nav>
  </header>

And everything is well located.
But when I add an object with an svg image inside .col-lg-2 , then everything moves out. What I need to do is to make it look like this:

Answer 1

SVG, like an image, requires fixed sizes in accordance with its original parameters, in img it is the size of the thumbnail, in SVG it is the viewport of the canvas on which it was created.
And then these sizes are changed using CSS, for example max-width: 100%. But it's so simple that it will work only with pictures, in theory with object too. It will be easier if you insert the SVG resource into the IMG, minus the possibilities, plus the adaptation, as for a beginner.
By the way, this question has nothing to do with Bootstrap.

Answer 2

try using flexbox to
add the property display: flex to the parent container; and justify-content: space-between (will stretch child boxes to the full width of the parent container with the same padding between them) or justify-content: space-around (almost the same as space-between, only add padding from the edge of the parent box equal to half padding between child-blocks)