スマホサイト： h2見出しが横にはみでる

MEMO

状況: 

PC用サイトのHPをもとに、スマホサイト作成時、

body全体を　width：100%　にしたが、

h2見出しが横にはみ出る 

理由: 

body(id="wrapper")全体は、100%にしたが、以下が理由のようだ。

１．bodyの中をヘッダー、コンテンツ、フッターと分けている

２．コンテンツをmainwrapとし、それをさらにmainwrap-left、mainwrap-rightに分けている

３．左サイドバーであるmainwrap-leftを非表示にした後、

　　コンテンツ全体(id="mainwrap")に対し、width=100%にする必要があったようだ。

　　予想だけど・・・。

解決方法：

/*■■■ 小画面：body（wrapper）に下記設定*/
/* mainwrapは別途設定必要あり*/
@media (max-width: 767px){
#wrapper{
width: 100%;
}
}

/*■■■ 小画面：画面サイズになるようにmainwrapに幅設定する*/
@media (max-width: 767px){
#mainwrap{
width: 100%;
}
}