もう一度素体からcss付けしてみるといい

ヒント
1.画像をhtmlに追加
2.画像にキャプション
 
3.sectionは画像部分と文章部分とそれぞれdivで囲む
4.headerにロゴ
 
5.reset.cssを追加。全称セレクタで。
reset.css呼び出しをhtmlに追加(場所に注意)
 
6.style.cssに取り掛かる
htmlでフォントサイズ？
bodyでフォントサイズ？
横並びのためのクラスを作っておこう
 
7.index.htmlにそのクラスを付与(ヒント 2か所)
8.header部分を左右に分けよう。余白も
 
9.テキストの頭文字を大文字に
 
10.footer部分は左右に均等揃え、左右逆で、余白も、背景色
11.ulは右揃え
 
12.main-visualに
背景画像をつける
13.高さ設定、全体を見せる、画像の中心を拡大縮小の中心、画像繰り返し不要
 
14.文字を縦方向の中心に(ヒント items)
15.左から余白も
 
16.文字白、灰色のクラスを作って当てはめる
17.h2,pの文字サイズや行間
 
18.main-visualの下の文章にクラスをつける
幅整える、余白調整(ヒント 上下とauto)、行間
 
19.明朝体、ゴシック体のクラス
20.それをhtmlに反映(ヒント 複数のclass付与は半角スペースで)
 
21.2つのsectionを囲っているdivにクラスをつける、それぞれのセクションにも
22.section内のimg,textもそれぞれdivで囲う
23.sectionを横並びに(ヒント sectionのクラスに何かを追加)

24.メインコラムの部分の幅、余白
25.二つ目のコラムを左右反転(ヒント 1行)

26.コラムのイメージ画像の幅を40%(ヒント basis)
27.全イメージ画像を？
28.コラムのイメージに余白
29.コラムの文章に60%の幅や余白
30.100%を超えるから、全称セレクタで？

31.コラムのセクションを縦方向の中央揃え
32.それぞれの余白や行間(ヒント margin-topは単位emで)
33.h3に下線(ヒント border-bottom)