Div не распространяется должным образом

Question

Всякий раз, когда я устанавливаю ширину div на 100%, и добавляю к нему новые элементы, он расширяется по границе экрана. Когда я устанавливаю div в значение пикселя, он работает нормально, но он не будет выглядеть должным образом при двух разных разрешениях экрана. Итак, я хочу, чтобы у меня был div, который бы соответствовал краю экрана и правильно расширялся.

JSFiddle: https://jsfiddle.net/272p06ng/4/

Спам на вкладку Добавить несколько раз, чтобы увидеть проблему. Затем найдите .l_tabs в CSS и прочитайте комментарий. Я считаю, что проблема заключается в родительских классах l_tabs.

Div с% стоимости ведет себя так:

Div со значением пикселя показывает поведение я хочу:

Вкладки Строительство:

<div class="l_tabs"> 
    <div> 
    <ul id="myTab1" class="nav nav-tabs bordered"> 
    <li class="tab-add"></li> 
    <li class="contentTab active "></li> 
    <li.....></li> 
    </ul> 
    </div> 
</div> 

CSS:

.l_tabs { 
    background: #474544 none repeat scroll 0 0; 
    display: block; 
    height: 57px; 
    overflow: hidden; 
    width: 100%; /* 1st picture */ 
    width: 1370px; /* second picture */ 
} 
.l_tabs > div { 
    background-color: #474544; 
    height: 57px; 
    padding-top: 4px; 
    width: 100%; 
} 
.l_tabs > div > ul { 
    overflow-x: auto; 
    white-space: nowrap; 
    width: 100%; 
} 

И есть некоторые родительские обертки, также имеющие ширину 100%.

EDIT: Добавление position:absolute к l.tabs зафиксировал проблему.

Answer 1

.l_tabs { 
    height: 57px; 
    display: block; 
    width: 100%; 
    background: #474544 none repeat scroll 0 0; 
    overflow: hidden; 
}