10 - merapikan tampilan outer-wrapper , main-wrapper dan sidebar-wrapper

lihat gambar dibawah ,

disitu terlihat tata letak main-wrapper dan sidebar menjorok keatas dikotak auter-wrapper ,
kemudian sisi outer-wrapper ke bawah tak sejajar dengan main-wrapper dan sidebar .
sebenarnya ini tak jadi masalah , kalau mau tampil beda .
hanya disini bagaimana membuat tampilan sejajar .

untuk membuatnya sejajar maka ubah nilai padding pada auter-wrapper agar menjadi sejajar kebawah .

#outer-wrapper {
BLA BLA BLA
padding: 10px; UBAH INI MENJADI 0 .
BLA BLA BLA
}

HASILNYA ;

#outer-wrapper {
BLA BLA BLA
padding:0;
BLA BLA BLA
}

sekarang menurunkan main-wrapper dan sidebar-wrapper dengan merubah nilai MARGIN nya .

#main-wrapper {
BLA BLA BLA
margin:30px 0 10px 0;
BLA BLA BLA
}
#sidebar-wrapper {
BLA BLA BLA
margin:30px 0 10px 0;
BLA BLA BLA
}

30px adalah jarak turun kedua kotak tersebut . terserah kalian mau berapa nilainya .