Главная наследует ширину от тела

Question

Я начинаю с HTML. Сторона, которую я собираюсь построить, - http://sv-lasserg.de/index.php?page=home. Вот Index.php и layout.css: http://jsfiddle.net/z57mqjor/. Основные части CSS:

html {background-color: #d1d1d1;} 

body { 

    width: 1000px; 
    margin: 0 auto; 
    background-color: #ffffff; 
    font-family: verdana; 
    font-size: 100%; 
    color: #000000;} 

main {  
padding: 20px 20px 20px 20px; 
position: relative;  
width: 617px;} 

Моя проблема заключается в том, что основной класс наследует атрибуты, как ширина от тела и не распознает атрибуты, приведенные в CSS к основному себе. Почему главный наследует все от тела?

Answer 1

Не должно быть периода перед Главным, как это?

.main { 

Answer 2

Вы должны объявить main как класс, используя .class или идентификатор, используя #id

путь класса (<div class="main">content here</div>)

html { 
    background-color: #d1d1d1; 
} 

body { 
    width: 1000px; 
    margin: 0 auto; 
    background-color: #ffffff; 
    font-family: verdana; 
    font-size: 100%; 
    color: #000000; 
} 

.main {  
padding: 20px 20px 20px 20px; 
position: relative;  
width: 617px; 
} 

ID способом (<div id="main">content here</div>)

html { 
    background-color: #d1d1d1; 
} 

body { 
    width: 1000px; 
    margin: 0 auto; 
    background-color: #ffffff; 
    font-family: verdana; 
    font-size: 100%; 
    color: #000000; 
} 

#main {  
padding: 20px 20px 20px 20px; 
position: relative;  
width: 617px; 
} 

Answer 3

вместо использование <main> тега, который не распознается браузером, попробуйте заменить его следующим образом:

<div id="main"> 
    .... 
</div> 

, а затем вы можете сделать это в вашем CSS

#main { 
    ... 
} 

Answer 4

«В Скрипках CSS вы забыли закрыть один из ваших правил CSS (#navi ul li: hover ul). Убедитесь, что это не так на самом листе. "- TiiJ7