Пустое место на правой стороне по телефону

Question

У меня проблема с шириной между экраном монитора и телефоном. Тем не менее, он хорошо работает на ПК, но не работает на телефоне, так как на правой стороне есть пустое пространство. Ниже приведен следующий код.

HTML

<div id="home-about"> 
    <div class="middle-align"> 
     <h1> ABOUT ME </h1> 
     <p> TESTING TESTING TESTING TESTING TESTING </p> 
    </div> 
</div> 

CSS

#home-about { 
    margin:0 auto; 
    clear:both; 
    height:880px; 
    padding:150px 50px 50px 50px; 
    background-color:#d24d57; 
    text-align:left; 
    line-height:25px; 
} 

.middle-align { 
    width:1200px; 
    margin:0 auto; 
} 

Прежде всего, цвет #home-about является #d24d57. Цвет полностью отображается на экране монитора, но не на телефоне.

Адрес JSFIDDLE. Как вы можете видеть JSFIDDLE, попробуйте прокрутить вправо, нет цвета, только белого цвета. Как заполнить также #d23d57. Есть идеи?

Answer 1

См этой ссылки на адаптивный дизайн Responsive layout tutorial? Или вы можете использовать Bootstrap для развития Отзывчивого HTML Get-Bootstrap. Надеюсь, что это поможет

Эти предложения должны быть комментарии, но не может сделать это причиной не получил эти privilages

Answer 2

Move width: 1200px к вашему #home-about:

#home-about { 
    margin:0 auto; 
    clear:both; 
    padding:150px 50px 50px 50px; 
    background-color:#d24d57; 
    text-align:left; 
    line-height:25px; 
    width: 1200px; 
} 

jsFiddle Demo.