モバイル時の表示について

初めまして
早速ですがご質問させていただきます。

本日初めて子テーマの編集をしまして
スタイルシートに

↓

#main .entry {
border-bottom: 1px solid #696969;
padding-bottom: 15px;
}

/* サイドバーの見出し背景を修正 */
#sidebar h4{
height: 50px;
line-height: 50px;
padding: 0 20px;
border-radius: 5px;
background: #f3f3f3;
font-weight: bold;
color: #000;
}

#new-entries h4:before{
margin-right:5px;
font-family:”FontAwesome”;
content:”\f1ea”;
}

#popular-entries h4:before{
margin-right:5px;
font-family:”FontAwesome”;
content:”\f06d”;
}

#popular-entries.widget_category_popular h4:before{
margin-right:5px;
font-family:”FontAwesome”;
content:”\f087″;
}

.widget_categories h4:before{
margin-right:5px;
font-family:”FontAwesome”;
content:”\f085″;
}

.widget_archive h4:before{
margin-right:5px;
font-family:”FontAwesome”;
content:”\f1c0″;
} 

.widget_popular_ranking ul li:before, .widget_new_popular ul li:before {
background: none repeat scroll 0 0 #FFF !important;
color:#000 !important;
top: -3px !important;
border-radius: 50px !important;
border:solid 2px #000 !important;
}

#new-entries ul li img, #popular-entries ul li img {
margin: 3px 5px 10px 3px;
}

.entry-read a{
color:#fff;
font-size:14px;
background-color:#FF837B;
border:1px solid #FF837B;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
}

.entry-read a:hover{
color:#fff;
background-color:#FFC3BF;
border:1px solid #FFC3BF;
}

.article h2 {
background-color: #57B196;
border-left: 0 none;
color: #fff;
padding: 15px 30px;
}

を入力したところ、
PCで見ると普通に表示されるのですが、
モバイルでサイトを見ると

記事一覧の背景だけが左寄りに寄ってしまいました。
このような場合はどうゆう対処をすればいいですか？

言葉足らずな文ではありますが
少しでも改善法があれば教えていただきたいです。