Панель поиска перекрывает SVG и не меняет размер при изменении размера окна браузера

Question

Я разрабатываю приложение с использованием VueJS и Bootstrap.

Существует разработанная мной верхняя панель навигации, содержащая панель поиска.

При изменении размера окна выполняется поискпанель отображается под значком DP, как показано на рисунке:

Вот код, который я написал для верхней панели навигации:

<style>
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 80%;
  color: #df382c;
}
.fa-eraser {
  width: 15px;
  margin: -25px 10px;
  float: right;
}

#search-box-div{
  margin-top: 15px; 
  width: 927px;
  height: 43px;
  margin-bottom: 15px;
  background: #E0E0E0; 
  border: none; 
  border-radius: 5px;
  margin: 0 auto;
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}
</style>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <nav class="navbar navbar-expand-lg" style="background-color: rgb(63, 81, 181); height: 70px; padding-left: 0px; padding-right: 0px;">
    <div class="container-fluid" style="padding-right: 0px; padding-left: 0px;">
      <!-- <a class="navbar-brand" href="#">Dashboard</a> -->
      <div class="mfWFCompCls" id="cmpD97ebaa2d11c1a79bc03e745e2889608f" style="transform: rotate(0deg);box-sizing: border-box;padding: 0px;margin: 0px;background: rgb(63, 81, 181);position: absolute;left: 13px;right: 13px;width: 42px;height: 42px;border: 2px solid rgb(255, 255, 255);border-radius: 0px;box-shadow: none;z-index: 0;pointer-events: all;"> 
        <span id="cmpD97ebaa2d11c1a79bc03e745e2889608f_txt" width="42" height="42" style="overflow: hidden; white-space: nowrap; text-align: center; transform: translateZ(0px); position: absolute; width: 38px; height: 38px; line-height: 38px; top: 0px; left: 0px; user-select: none; font-family: &quot;Source Sans Pro&quot;; font-weight: normal; font-style: normal; text-decoration: none; font-size: 26px; color: rgb(255, 255, 255);">
          DP
        </span>
      </div>
      
      <div class="collapse navbar-collapse justify-content-end">
        
        <div class="form-group has-search" id="search-box-div" style="margin-right: 0px; margin-left: 0px;">
          <span class="fa fa-search form-control-feedback">
          </span>
          <input type="text" class="form-control" style="background-color: #E0E0E0;">
        </div>

        <ul class="nav navbar-nav">

          <li class="pull-right" style="margin-left: 140px;overflow: auto;width: 55px;">
            <button class="btn">
              <a href="#" class="nav-link">
              <svg width="31px" height="28px" viewBox="0 0 50 50" fill="rgb(255,255,255)" style="transform: scaleX(1);">
                <g>
                  <path d="M25,0C11.215,0,0,11.215,0,25s11.215,25,25,25s25-11.215,25-25S38.785,0,25,0z M25,48C12.318,48,2,37.683,2,25
                      C2,12.318,12.318,2,25,2c12.683,0,23,10.318,23,23C48,37.683,37.683,48,25,48z" fill="rgb(255,255,255)">
                  </path>
                  <path d="M26.439,33.493h-2.726c-0.216,0-0.359,0.143-0.359,0.358v3.084c0,0.215,0.142,0.358,0.359,0.358h2.726
                      c0.214,0,0.358-0.142,0.358-0.358v-3.084C26.797,33.637,26.654,33.493,26.439,33.493z" fill="rgb(255,255,255)">
                  </path>
                  <path d="M25.29,12.508c-3.73,0-6.205,2.26-6.744,5.703c-0.035,0.216,0.072,0.359,0.288,0.395l2.259,0.395
                      c0.216,0.036,0.359-0.072,0.395-0.287c0.43-2.188,1.721-3.407,3.729-3.407c2.045,0,3.479,1.291,3.479,3.335
                      c0,1.22-0.43,2.045-1.684,3.766l-2.404,3.3c-0.753,1.041-1.075,1.793-1.075,3.229v1.47c0,0.215,0.143,0.359,0.358,0.355h2.367
                      c0.215,0,0.358-0.143,0.358-0.358v-1.147c0-1.219,0.216-1.721,0.933-2.689l2.403-3.3c1.22-1.686,1.828-2.941,1.828-4.663
                      C31.78,15.054,29.162,12.508,25.29,12.508z" fill="rgb(255,255,255)">
                  </path>
                </g>
              </svg>
            </a>
            </button>
            
          </li>

          <li class="pull-right" style="margin-left: 0px;overflow: auto;width: 50px;">
            
            <a href="#" class="nav-link">
              <svg width="28px" height="29px" viewBox="0 0 32 32" fill="rgb(255,255,255)" style="transform: scaleX(1);">
                <g id="icomoon-ignore"></g>
                  <path d="M25.074 21.375v-8.568c0-4.462-3.229-8.162-7.474-8.915v-0.681c0-0.589-0.478-1.066-1.066-1.066h-1.066c-0.589 0-1.066 0.477-1.066 1.066v0.684c-4.237 0.761-7.453 4.458-7.453 8.912v8.568l-3.742 3.029v1.729h25.59v-1.729l-3.721-3.029zM27.729 25.066h-23.457v-0.154l3.742-3.029v-9.077c0-4.41 3.587-7.997 7.997-7.997 4.409 0 7.997 3.587 7.997 7.997v9.075l3.721 3.029v0.155z" fill="rgb(255,255,255)">
                  </path>
                  <path d="M15.999 29.856c1.473 0 2.669-1.192 2.669-2.666h-5.335c0.001 1.473 1.195 2.666 2.667 2.666z" fill="rgb(255,255,255)">
                  </path>
              </svg>
            </a>
          </li>

          <li class="pull-right" style="margin-left: 0px;overflow: auto;height: 74px;width: 84px;">
            <a href="#" class="nav-link">
              <img src="https://s3.amazonaws.com/assets.mockflow.com/app/wireframepro/company/Ce2a424ef4ceda0e290183969f80b8bf3/projects/M7ef9781ba0f94f2d681e59f3712174831545182208896/images/Dbdb9c1db2d04d43aa0c9349ee59e635e" style="height: 54px; width: 54px;">
            </a>
          </li>

        </ul>
      </div>
    </div>
  </nav>
</template>

Что я здесь не так делаю?Я бы очень хотел помочь с этим.Заранее спасибо!