Исправление CSS float

Question

Итак, я создал идентификатор с именем top-section, класс с именем container и еще 2 класса logo & log-in. Мне нужен фоновой цвет top-section, чтобы охватить более 100% ширины тела и внутри top-section У меня есть 3 divs с логотипом классов и входа в систему. logo div нужно поплавать слева и log-in div справа. Оба эти дивы внутри container DIV, ширина которого составляет 80% .Здесь мой HTML

<div id="top-section"> 
    <div class="container"> 
     <div class="logo"> 
      Logo 
     </div> 
     <div class="log-in"> 
      Sign In 
     </div> 
    </div> 
</div> 

CSS здесь

#top-section{ 
    background-color: #f5f5f5; 
    width: 100%; 
    display: inline-block; 
    margin: 0 auto; 
    overflow: auto; 
} 
.container{ 
    width: 80%; 
} 
#top-section .logo{ 
    float: left; 
} 
#top-section .log-in{ 
    float: right; 
} 

То, что я хочу достичь текст Logo и Sign In должен уже в background- цвет top-section, но в то же время они не должны размещаться в крайних конечных точках ширины тела, т.е. наследовать ширину 80% от контейнера класса, чтобы они оставляли некоторое пространство от крайнего конца тела. Класс log-in работает нормально и оставляет некоторое пространство справа, но есть проблема с классом logo, и он не оставляет места слева. Это из-за поплавка? Как это исправить? Вот моя скрипка http://jsfiddle.net/adityasingh773/76wmomh1/

Answer 1

Вам просто нужно выровнять по центру свой класс .container внутри верхнего сечения, чтобы он не был выровнен по левому краю.

.container{ 
    width: 80%; 
    margin: 0 auto; /*Add this*/ 
} 

Обновлено скрипку here

Answer 2

просто добавьте margin-left и margin-right к вашему логотипу и регистрации соответственно.

Попробуйте fiddle

UPDATE:

Другой способ заключается в добавлении margin: 0 auto к вашему .container

Answer 3

Добавить margin: 0 auto; в .container. Это 80% ширина .top-section, но все еще сидит слева. Это центрирует его и получает ваши другие элементы, где вы хотите их.