How to properly layout the header of the site?

Question

css

Good day, the following question arose when laying out the site - there is a site header. The site is made using bootstrap. If we use the logo ("INFUSION") inside the col-md-2 div, then there is just a white indent on the left, and then the logo on a colored background. What is the best way to get rid of this "gap" so that there are no problems when adapting the site to other devices?

Answer 1

.top_line{
background-color: #63c6ae;
overflow: hidden;
}
.top_line .col-md-10 {background-color: #fff;}
.top_line .col-md-10:after {
content:'';
position:absolute;
left: 100%
width: 50%
height: 100%;
top: 0;
background: #fff;
}

Answer 2

<header class="main_header">
  <div class="top_line">
    <div class="container">
      <div class="row">
        <div class="col-md-2">
          <div class="main_logo">
            <p>Infusion</p>
          </div>					
        </div>
        <div class="col-md-10">
          <div class="main_nav">
            <ul>
              <li><a href="#">design Folio</a></li>
              <li><a href="#">Services</a></li>
              <li><a href="#">our business</a></li>
              <li><a href="#">how we help</a></li>
              <li><a href="#">take the tour</a></li>
              <li><a href="#">contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

in css I write:

.main_logo {
  background-color: #63c6ae;
  height: 74px;
}