Как «растянуть» меню на всю ширину экрана?

Question

[First Name]

Всем доброго времени суток. Нужно меню растянуть на всю ширину экрана,как можно это сделать? Знакомый сказал,что верстка кривая,и нужно враппер поменять местами с контентом. Но хотелось бы узнать по-подробнее.Так как ковырял.но ничего не получилось.
Сам сайт
Заранее благодарю за ответ.

Comments

[Ingernirated]

width:100% не вариант?

[First Name]

Ingernirated: нет,так как бутстрап,контейнер блокирует.Верней растягивается на ширину контейнера

[Ingernirated]

Максим Теплов: Сделайте исключение для одного блока и создайте его отдельно со своим классом
, вместо бутстрапа.Бутстрап хорош, но не универсален.

Answer 1

[Ярослав Иванов]

Как вариант можете добавить в свой файл css это

#navigation {
    width: calc(100% - (-99px));
    margin-left: -50px;
}

а в layout.css на 75 строке поменять это

@media only screen and (min-width: 768px){
ul.nav li {
    padding-left: 3%;
}
}

на это

@media only screen and (min-width: 768px){
ul.nav li {
    padding-left: 50px;
}
}

Хотя это не совсем валидно. Лучше с враппером разобраться. С другой стороны смотрится нормально и ничего не едет.

Добавил скриншот.

Comments

[First Name]

А что с ним сделать можно?:С
я никак не допру

[Ярослав Иванов]

Если это сложно то сделай как у меня в ответе и посмотри как работает. Если все устраивает то ок.

[First Name]

да,сделал.
Только одно НО.
На "главной" странице(моя самописная) криво становится)
tiarsekj.bget.ru

[Ярослав Иванов]

тогда вместо padding-right: 99px добавь width: calc(100% - (-99px)); Код в ответе поправил

[First Name]

Благодарю.
Очень помог,спасибо)

[First Name]

Пля,что-то накосячил...На самописной странице все норм,а в магазине самом #navigation растянулось и горизонтальная полоска прокрутки появилась...
Если убрать строчку "width: calc(100% - (-99px));" то встает все нормально в магазине,а на самописной нет :С

[First Name]

UPD
Моя оплошность,пэддинг не чайно задал :D

Answer 2

[Mini MVC]

Он у тебя походу находиться в container или wrapper смотря как ты назвал. Тебе надо вывести меню оттуда и дать width 100% скинь код сайта я тебе точно скажу тогда

Comments

[First Name]

сайт же есть

Answer 3

[ArtViolence]

<nav class="main-nav">
<a href="#">Главная</a>
<a href="#">Доставка и оплата</a>
<a href="#">О компании</a>
<a href="#">Отзывы</a>
<a href="#">Контакты</a>
</nav>

.main-nav
	display: table
	position: relative
	width: 100%
	height: 60px
	a
		color: #000
		display: table-cell
		text-align: center
		vertical-align: middle
		min-width: 120px
		text-decoration: none
		border-left: 1px solid lighten($accent, 5%)
		transition: background-color 1s easy
		&:last-child
			border-right: 1px solid lighten($accent, 5%)
		&:hover
			background-color: lighten($accent, 5%)
			text-decoration: none
			transition: background 1s easy

меню будет на всю ширину контейнера, тебе надо сделать его width: 100%. элементы распределятся равномерно и без промежутков