Как расширить правую ширину div?

Question

Я хочу, чтобы развернуть правильную ширину дел до 100% (смотрите на скриншот, мой ДИВ красный), я попытался с: например

HTML:

<header> 
    <nav> 
     <ul> 
      <li>Menu</li> 
      <li>Menu</li> 
      <li>Menu</li> 
     </ul> 
    </nav> 
    <aside> 
     <h1>Logo</h1> 
    <aside> 
</header> 

CSS:

header { 
    width: 1024px; 
    height: 395px; 
    margin: 0 auto; 
} 

nav { 
    height: 60px; 
    width: 690px; 

    position: absolute; 
    top: 20px; 
    right: 0; 

    background:red; 
} 

Это прекрасно работает, но когда я пытаюсь уменьшить масштаб (ctrl -), список меню выходит из контейнера. Логотип остается центрированным, но нет.

Спасибо за помощь!
и извините за мой плохой английский.

Answer 1

Я думаю, что вы ищете это: jsfiddle. Поместите position: relative в свой заголовок. После этого позиционирование вашего навигатора будет вести себя относительно вашего заголовка. И для правильного выравнивания измените свой top: 20px на top: 0.

Answer 2

Если вы хотите, чтобы красная полоса всегда выходила на правый край окна, даже если вы увеличиваете и сужаете окно браузера, вы можете установить ширину этого столбца на очень высокое значение (например, 500%). Это приведет к увеличению бара вправо, но добавит горизонтальную полосу прокрутки. Так установить следующее просто скрыть переполнения:

html,body 
{ 
    overflow-x:hidden; 
}