8 - membuat responsive header dan footer

caranya:
jadikan  width nya auto .

#header-wrapper{width:auto;
#footer {width:auto;
maka dengan ini tampilan wrapper nya full responsive tanpa perlu memakai @media query

coba tes di situs tes responsive.
atau pakai saja Ctrl-Shift+m , tekan semuanya .

namun pada gambar kedua ini , ketika tampilan makin di perkecil , huruf tak responsive .

adapun agar huruf tak melewati batas tampilan di header,
maka tambah kode ini word-wrap:break-word; pada susunan H1 .

#header h1{
bla bla bla
font:normal normal 200% Georgia,Serif;
word-wrap: break-word;
}

hasilnya jadi begini :

begitupun di footer ,
namun apabila huruf telah responsive di footer , maka tak usah di tambah kode seperti di header tsb .