Центрирование содержание с запасом: 0 авто

Question

Ниже мой CSS код:

<style type="text/css"> 

body { 
    background-color:#FFF; 
    font-weight:bold; 
    font-size:12pt; 
    font-family:Arial,sans-serif; 
} 

.container { 
    width: 800px; 
    margin: 0 auto; 

} 

#header { 
    text-align: left; 
    padding-top: 220px; 
    font-size: 60pt; 

} 
#subheader { 
    text-align:left; 
    font-size: 15pt; 
    color: #666; 
    margin-top: -5px; 
    margin-bottom: 15px; 

} 

#email { 
    width: 165px; 
    height: 25px;  
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    text-align:center; 
    border: 2px solid; 
    color: #666; 
    border-color: black; 

} 
input[type=submit] { 
    height: 30px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background-color: #000; 
    border-color: #fff; 
    color: #fff; 
} 

#socialMedia { 
    padding-top: 60px; 
    text-align:center; 
} 
#video { 
    padding-left: 600px; 
    margin-top: -260px; 

} 
</style> 

HTML-дивы разделены следующим образом:

<div class="container"> 
<div id="header"> 
    <Content> 
</div> 
<div id="subheader"> 
    <Content> 
</div> 
<Form Input Field> 

<div id="video"> 

<Embedded Video> 
</div> 

<div id="socialMedia"> 
    <Social Media Image Links> 
</div> 

</div> 
</body> 
</html> 

Проблема у меня с этим является то, что в то время как страница пытается центрировать себя с масштабированием браузера, только левая часть содержимого действительно настраивается. Правая сторона, по существу, висит на краю страницы, тем самым не центрируя ее.

Любые предложения? Я попробовал это с помощью Chrome.

Answer 1

Это может быть проблема:

#video { 
    padding-left: 600px; 
    margin-top: -260px; 

} 

Я не уверен, что размер видеоконтейнер, но, возможно, именно поэтому он не центрируется должным образом со всем остальным.

Когда вы используете этот CSS вместо этого, что происходит?

#video { 
    text-align:right; 
    margin-top: -260px; 

} 

Возможно, я не понимаю, в чем проблема. Не могли бы вы отправить скриншот проблемы?

Answer 2

Попробуйте установить максимальную ширину на контейнере:

.container { 
    max-width: 800px; 
    margin: 0 auto; 
} 

Вот демо: http://jsfiddle.net/Ltf5U/