Как сделать навигационную панель растягивать всю ширину моей страницы

Question

Я хочу, чтобы моя панель навигации растягивала всю ширину моей страницы, но она не хочет растягиваться каждый раз, когда я использую ширину 100%, навигация просто ломается и теряет форму , Я не использую любой яваскрипт и я думаю, что проблема в классе .horizontal-центрирующим CMIW

JSFiddle

Я использую чистый CSS навигационной панели

/* dropdown.css */ 
ul.dropdown, ul.dropdown li, ul.dropdown ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
ul.dropdown { 
    position: relative; 
    z-index: 597; 
    float: left; 
} 
ul.dropdown li { 
    float: left; 
    min-height: 1px; 
    line-height: 1.3em; 
    vertical-align: middle; 
} 
ul.dropdown li.hover, ul.dropdown li:hover { 
    position: relative; 
    z-index: 599; 
    cursor: default; 
} 
ul.dropdown ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 100%; 
} 
ul.dropdown ul li { 
    float: none; 
} 
ul.dropdown ul ul { 
    top: 1px; 
    left: 99%; 
} 
ul.dropdown li:hover > ul { 
    visibility: visible; 
} 
/* default.css */ 
ul.dropdown { 
    font: normal 16px"Square", Arial, Helvetica, sans-serif; 
    text-transform: uppercase; 
} 
ul.dropdown li { 
    padding: 7px 0; 
    background-color: #000; 
    color: #fff; 
    line-height: normal; 
} 
ul.dropdown a:link, ul.dropdown a:visited { 
    color: #fff; 
    text-decoration: none; 
} 
ul.dropdown a:hover { 
    color: #005CE6; 
    text-decoration: none; 
} 
ul.dropdown a:active { 
    color: #fff; 
} 
ul.dropdown ul { 
    width: 170px; 
    background-color: #333; 
    color: #fff; 
    font-size: 12px; 
    text-transform: none; 
    filter: alpha(opacity=90); 
    -moz-opacity: .9; 
    KhtmlOpacity: .9; 
    opacity: .9; 
} 
ul.dropdown ul li { 
    background-color: transparent; 
    color: #000; 
    filter: none; 
} 
ul.dropdown ul li.hover, ul.dropdown ul li:hover { 
    background-color: transparent; 
} 
ul.dropdown ul a:link, ul.dropdown ul a:visited { 
    color: #fff; 
} 
ul.dropdown ul a:hover { 
    color: #fff; 
    text-decoration: none; 
} 
ul.dropdown ul a:active { 
    color: #fff; 
} 
ul.dropdown *.dir { 
    padding-right: 12px; 
    background-image: none; 
    background-position: 100% 50%; 
    background-repeat: no-repeat; 
} 
/* default.advanced.css */ 
ul.dropdown li a { 
    display: block; 
    padding: 7px 14px; 
} 
ul.dropdown li { 
    padding: 0; 
} 
ul.dropdown li.dir { 
    padding: 7px 20px 7px 14px; 
} 
ul.dropdown ul li.dir { 
    padding-right: 15px; 
} 
ul.dropdown ul a { 
    padding: 4px 5px 4px 14px; 
    width: 151px; 
} 
ul.dropdown ul a:hover { 
    background-color: #005CE6; 
} 
ul.dropdown li:hover > a.dir { 
    background-color: #2e2e2e; 
    color: #005CE6; 
} 
ul.dropdown ul li:hover > a.dir { 
    background-color: #76b900; 
    color: #fff; 
} 
html { *overflow-x: hidden; } 
body { padding: 0; } 
body, html { height: 100%; padding: 0; margin: 0; } 
.wrapper { min-height: 100%; min-width: 950px;overflow: hidden; } 
.container { padding: 50px; } 

.horizontal-centering { position: relative; } 
.horizontal-centering > * > * { float: left; width: auto; position: relative; left: 50%; margin: 0; padding: 0; } 
.horizontal-centering > * > * > * { float: left; position: relative; right: 50%; } 

Answer 1

Вместо использования переполнения, скрытого для очистки поплавков с помощью класса помощника clearfix, это привело к появлению второго уровня.

/* helper class for clearing floats */ 
.clearfix:after{ 
    display: block; 
    visibility: hidden; 
    clear: both; 
    height: 0; 
    content:"."; 
    } 
    .clearfix { 
    display: inline-block; 
    } 
    .clearfix{ 
    display: block; 
    } 

Переработан выпадающий список и центрирования немного

.horizontal-centering { 
    background: #000000; 
    position: relative; 
} 
.horizontal-centering > div > div { 
    clear: both; 
    float: left; 
    width: 100%; 
} 
.dropdown-horizontal { 
    float: left; 
    width: auto; 
    position: relative; 
    left: 50%; 
    margin: 0; 
    padding: 0; 
} 
ul.dropdown > li > ul { 
    visibility: hidden; 
    position: absolute; 
    width: auto; 
    left: 0; 
} 
ul.dropdown > li:hover > ul { 
    visibility: visible; 
} 
ul.dropdown, ul.dropdown li, ul.dropdown ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
ul.dropdown { 
    float: left; 
    left: 50%; 
    list-style-type: none; 
    margin: 0 auto; 
    padding: 0; 
    position: relative; 
} 
ul.dropdown > li { 
    float: left; 
    position: relative; 
    right: 50%; 
    line-height: 1.3em; 
} 
ul.dropdown li.hover, ul.dropdown li:hover { 
    cursor: default; 
} 

ul.dropdown ul li { 
    float: none; 
} 

http://fiddle.jshell.net/35JPL/26/
http://fiddle.jshell.net/35JPL/26/show/

Answer 2

Проверить эту скрипку, основанный на Ваш: http://jsfiddle.net/u67qx/

Я добавил width:100% в некоторые классы, и я удалил левый: 50%; и право: 50% ;. Похоже, это то, что вы хотите. Вы можете выровнять текст по центру.