Выход за пределы колонок bootstrap

Привет, форумчане. Верстаю сайт, не могу понять как выйти за пределы колонок, чтобы наложить bacground-color как на макете(там где contact info):
http://i.imgur.com/RilMw38.png
То есть нужно сдвинуть вправо.

Вот как у меня сейчас выглядит:
http://i.imgur.com/A9ALR28.png

Код:
HTML:

<div class="section_main">

	<div class="container">

		<div class="row">

			<div class="col-md-6">

				<form action="/" method="POST">

					<input id="feedback_name" type="text" name="name" placeholder="Name" required>

					<input id="feedback_email" type="email" name="email" placeholder="Your Mail" required>

					<textarea id="feedback_textarea" name="message" cols="30" rows="5" placeholder="Type your message"></textarea>

					<input id="feedback_submit" type="submit" name="submit" value="Send message">

				</form>

			</div>

			<div class="col-md-5 col-md-offset-1 contact_info">

				<h5>Contact info</h5>

				<p id="adress">Jalalabad 24 / A, Ambaarkhana, Sylhet, Bangladesh</p>

				<p id="mail">[email protected]</p>

				<p id="number">(+88) 017 617 46373</p>

			</div>

		</div>

	</div>

</div>

CSS:

.section_main {

	form {

		margin-top: 20px;

		input {

			&:focus {

				outline: none;

			}

		}

		#feedback_name {

			border-radius: 5px;

			border: none;

			background-color: #e5e5e5;

			padding: 20px 30px;

			width: 47%;

			margin-bottom: 30px;

		}

		#feedback_email {

			border-radius: 5px;

			border: none;

			background-color: #e5e5e5;

			padding: 20px 30px;

			width: 47%;

			float: right;

			margin-bottom: 30px;

		}

		#feedback_textarea {

			border-radius: 5px;

			border: none;

			background-color: #e5e5e5;

			padding: 20px 30px;

			width: 100%;

			margin-bottom: 30px;

			&:focus {

				outline: none;

			}

		}

		#feedback_submit {

			border-radius: 5px;

			border: none;

			background-color: #ff3b3b;

			padding: 20px 30px;

			width: 100%;

			color: #fff;

			@extend .bold;

			text-transform: uppercase;

		}

	}

	.contact_row {

		background-color: #2d2d2d;

	}

	.contact_info {

		//width: 50%;

		margin-top: 20px;

		padding: 50px 20px;

		background-color: #2d2d2d;

		h5 {

			@extend .bold;

			text-transform: uppercase;

			color: #e0e0e0;



		}

		p {

			color: #fff;

		}

	}

}

Цитата:

---

Сообщение от Prolific

.contact_info {
//width: 50%;
margin-top: 20px;
padding: 50px 20px;
background-color: #2d2d2d;
h5 {
@extend .bold;
text-transform: uppercase;
color: #e0e0e0;

}
p {
color: #fff;
}
}

---

CSS не вкладываются друг в друга

Цитата:

---

Сообщение от Den1xxx

CSS не вкладываются друг в друга

---

это less

попробуйте задать padding-right побольше

Цитата:

---

Сообщение от AlexZaw

это less

попробуйте задать padding-right побольше

---

Это SCSS)

Пробовал, блок съезжает вниз тогда.

Цитата:

---

Сообщение от Prolific

Это SCSS)

---

Да без разницы, препроцессор и ладно:)
а у родительских дивов ширина не задана? может она ограничивает?

Цитата:

---

Сообщение от AlexZaw

Да без разницы, препроцессор и ладно:)
а у родительских дивов ширина не задана? может она ограничивает?

---

Да, в этом и дело, что все запихано в container, он имеет фиксированную ширину, но как сделать так, чтобы форма и контакты были в один ряд как и сейчас, только блок с контактами растягивался вправо

Можно попробовать вывести форму и contact info из контейнера, если не получится, то прописать contact info псевдо элемент after или before и абсолютно спозиционировать его справа, по идее тогда ширина самого элемента не изменится, он останется на месте, а псевдоэлемент займет место до края экрана

Цитата:

---

Сообщение от AlexZaw

Можно попробовать вывести форму и contact info из контейнера, если не получится, то прописать contact info псевдо элемент after или before и абсолютно спозиционировать его справа, по идее тогда ширина самого элемента не изменится, он останется на месте, а псевдоэлемент займет место до края экрана

---

Записал в .contact_info:

position: absolute;

right: 0;

Спасибо, что подсказал

Ну я маленько не это имел ввиду, но главное что сработало :)

можно было row контейнер добавить — он имеет отрицательный маржин

И что бы это дало? Ну есть у него отрицательный маржин, в 15 пикселей, а толку то? Да и даже если мы его сдвинем маржином то он отодвинется от формы

Из моего опыта работы с бутстрапом могу сказать что верстать по дизайнерскому макету-сетке опираясь на бутстраоп НЕВОЗМОЖНО. Может быть, что-то получиться, если дизайнер сам верстал под бутстрап, и рисует именно под бутстрап, но и то, там будет огромная куча проблем.

Иначе дизайнер или тестировщик будет вам говорить - а вот тут у меня отступ 20 пикселей, а у тебя 15! А вот тут у меня цвет 1b1b1b а у тебя 1c1c1c!
true story