google chrome、atomを使って独学で参考本を使って勉強していますが、わからないところが発生しました
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta chareset="utf-8"> <title>ページのタイトル</title> <link rel="stylesheet" href="../common/css/style.css"> </head> <body> <div id="page"> <header id="pageHead"> <h1 id="siteTitle">komorikomashu</h1> <p id="catchcopy">1人じゃできないことも、力を合わせればできる。やってみたいことをカタチにする、3人の楽しいものづくり。</p> </header> <div id="pagebody"> <div id="pagebodymain"> <artuicle class="artuicleDetail"> <header class="artuicleDetailhead"> <h1 class="pageTitle">Cafe Debut</h1> <img src="images/img_01_01.jpg" alt="" whdth="720" heigth="390"> <p>baser CMS カフェサイト用テーマ<br> baser CMS テーマコンサート2012 飲食店系テーマ賞受賞(受賞結果はこちら)</p> </header>CSS
問題のところは一番下の/*見出し*/の
.pageTitle{
font-size: 26px;
background-color: #F2F2E5;
padding: 5px 15px;
margin-top: 0;
}
のmargin-top: 0;です
body { color: #333333; }
p {
font-size: 14px;
line-height: 1.429;
}
/ページ/
#page{
width: 980px;
margin: 0 auto;
}
/ページボディ/
#pagebody::after{
content: "";
clear: both;
display: block;
}
#pagebodymain{
width: 720px;
float: left;
}
#pagebodysub{
width: 220px;
float: right;
}
/ページヘッダー/
#siteTitle{
font-size: 30px;
line-height: 1.2;
}
#catchcopy{
font-size: 12px;
line-height: 1.5;
}
#copyright small{
font-size: 12px;
line-height: 1.5;
}
#pageFoot{
font-size: solid 1px #cccccc;
margin-top: 15px;
}
/区切り線・余白/
.artuicleDetailhead{
border-bottom: solid 1px #CCCCCC;
margin-bottom: 30px;
padding-bottom: 15px;
}
.artuicleDetailfoot{
border-top: solid 1px #CCCCCC;
margin-top: 30px;
padding-top: 15px;
}
.artuicleDetailbody section{
margin: 30px 0;
}
/撮影情報/
.creditUnit{
padding: 10px;
border: solid 1px #CCCCCC;
}
.creditUnit p{
font-size: 12px;
}
/リスト/
ul li{
font-size: 14px;
list-style-type: square;
}
/表/
table{
font-size: 14px;
border: solid 1px #CCCCCC;
border-collapse: collapse;
width: 100%;
}
table th,
table td{
border: solid 1px #cccccc;
padding: 5px 10px;
}
table th{
background-color: #EEEEEE;
text-align: left;
}
table caption{
text-align: left;
font-size: bold;
}
/画像キャプション/
figcaption{
font-size: 12px;
}
/見出し/
.pageTitle{
font-size: 26px;
background-color: #F2F2E5;
padding: 5px 15px;
margin-top: 0;
}
.heading-type1{
font-size: 18px;
color: #349FA6;
border-bottom: solid 1px #349FA6;
padding: 5px;
}
.heading-type2{
font-size: 16px;
border-left: solid 5px #E3E4D9;
padding-left: 10px;
}
.heading-type3{
font-size: 14px;
}
と打ったのですが進めていくうちに、ブラウザ表示のマージンが設定されたため、空白ができたので後からmargin-top:0;を打って上書きしようとしたのですが、反映されません
ほかのものでも後から付け足したものは反映されず、要素を全て消してまた1から打てば反映されます
参考本ではしっかり反映されているのですが…
私のパソコンが変なのでしょうか?
これだけじゃ判断しかねなかったら追記しますので指示をください
よろしくお願いします