Проблема с CSS-форматом

Question

Я не могу прожить жизнь, чтобы узнать, что не так с кодом CSS, я не могу получить шрифт в главном <p>, чтобы он был 20px и не мог правильно центрировать адрес в нижнем колонтитуле. Мне разрешено редактировать файл css.

Html файл: http://www.mediafire.com/view/68bcokhw6tb086g/redball.htm

CSS файл: http://www.mediafire.com/view/9rk9dracsz47sn7/pizza.css

CSS код:

/* 
New Perspectives on HTML and CSS 
Tutorial 4 
Case Problem 2 

Pizza Style Sheet 
Author: Joesph Aguilar 
Date: 01/31/2014 

Filename:   pizza.css 
Supporting Files: 

*/ 

/* Display Block Elements */ 
header, section, aside, footer, nav{ 
display: block; 
} 

/* Padding and Margin Style */ 
*{ 
padding: 0px; 
margin: 0px; 
} 

/* Body Style */ 
body{ 
background-color: red; 
font-family: Verdana, Geneva, sans-serif; 
} 

/* Container Style */ 
#container{ 
width: 1000px; 
margin-top: 0px; 
margin-bottom: 0px; 
margin-left: auto; 
margin-right: auto; 
border-left: 1px solid black; 
border-right: 1px solid black; 
background: white url('redbar.png') repeat-y left top; 
} 

/*Header Style */ 
header{ 
background-color: white; 
height: 100px; 
} 

/* Horizontal Nav Style */ 
nav.horizontal{ 
background-color: white; 
height: 70px; 
width: 100%; 
} 
nav.horizontal li{ 
background-color: white; 
font-size: 16px; 
height: 50px; 
line-height: 50px; 
width: 180px; 
display: block; 
float: left; 
margin-left: 5px; 
margin-right: 5px; 
text-align: center; 
} 
nav.horizontal li a{ 
display: block; 
background-color: red; 
color: white; 
border-radius: 30px/25px; 
-moz-border-radius: 30px/25px; 
-webkit-border-radius: 30px/25px; 
text-decoration: none; 
} 
nav.horizontal li a:hover{ 
background-color: (255, 101, 101); 
color: black; 
} 

/* Vertical Nav Style */ 
nav.vertical{ 
clear: left; 
float: left; 
width: 200px; 
} 
nav.vertical li{ 
list-style-type: none; 
text-indent: 20px; 
margin-top: 20px; 
margin-bottom: 20px; 
} 
nav.vertical li a{ 
color: white; 
text-decoration: none; 
} 
nav.vertical li a:hover{ 
color: black; 
} 

/* Section Style */ 
#main{ 
background-color: rgb(255, 211, 211); 
float: left; 
width: 600px; 
} 
#main > p { 
font-size: 20px; 
margin: 15px; 
} 
#main img{ 
float: right; 
margin: 15px; 
width: 350px; 
border-bottom-left-radius: 350px; 
-moz-border-radius-bottomleft: 350px; 
-webkit-bottom-left-radius: 350px; 
} 

/* Coupon Style */ 
#main div.coupon{ 
border: 5px; 
border-style: dashed; 
float: left; 
width: 170px; 
height: 150px; 
margin-top: 20px; 
margin-bottom: 20px; 
margin-left: 10px; 
margin-right: 10px; 
background: white url('slice.png') no-repeat right bottom; 
} 
#main div.coupon h1{ 
color: white; 
background: rgb(192, 0, 0); 
font-size: 16px; 
letter-spacing: 2px; 
text-align: center; 
height: 25px; 
font-variant: small-caps; 
} 
#main div.coupon p{ 
font-size: 14px; 
text-align: center; 
margin: 5px; 
} 

/* Aside Style */ 
aside{ 
float: left; 
width: 200px; 
} 
aside h1{ 
color: rgb(192, 0, 0); 
font-size: 20px; 
letter-spacing: 2px; 
font-weight: normal; 
text-align: center; 
} 
aside li{ 
background-color: rgb(255, 135, 135); 
border-radius: 5px; 
list-style-type: none; 
margin: 10px; 
padding: 5px; 
} 

/*Footer Style*/ 
footer{ 
clear: left; 
margin-left: 200px; 
} 
footer address{ 
border-top-style: 1px solid red top; 
color: red; 
font-size: 10px; 
font-style: normal; 
text-align: center; 
margin-top: 25px; 
padding-bottom: 20px; 
    } 

Answer 1

Адрес центрируется в сноске. Ваша проблема заключается в том, что вы хотите, чтобы адрес был сосредоточен на главном разделе #, а нижний колонтитул не находится в разделе # main, он находится в контейнере div #, что приводит к адресу, адресуемому по всему контейнеру.

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

Итак, мы хотим, чтобы на колонтитула адреса:

margin-right:200px; 

, но так как у нас уже есть

margin-top:25px; 

мы можем просто удалить этот запас-верхнюю линию и сказать, как с:

margin:25px 200px 0 0; 

, который является сокращением для верхнего края 25px right 200px bottom 0 left 0.

Наконец, правильный способ отправить это будет на JSFiddle, это очень легко понять, и я кладу решение для вашей проблемы здесь:

http://jsfiddle.net/R8Hsv/

Answer 2

О вашем размере шрифта кажется хорошо, по крайней мере, я могу это изменить. Как вы ожидаете, 20px?

Придется установить ширину для нижнего колонтитула, так же как и main.

footer address{ 
border-top-style: 1px solid red top; 
color: red; 
font-size: 10px; 
font-style: normal; 
text-align: center; 
margin-top: 25px; 
padding-bottom: 20px; 
width:600px; 
} 

JSFIDDLE: http://jsfiddle.net/42h96/1/