Как правильно сверстать header сайта?

Question

[hakkol]

Доброго времени суток, возник следующий вопрос при верстке сайта - есть шапка сайта Сайт делается с помощью bootstrap. Если мы используем лого ("INFUSION") внутри дива col-md-2, то слева остается просто белый отступ, а затем идет лого на цветном фоне. Как лучше избавится от этого "пробела", чтобы не было проблем при адаптации сайта под другие устройства?

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

[hakkol]

<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>

в css пишу:

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