CSS footer issue in iPad and iPhone

Question

I have this footer at the bottom of my side and it looks fine on a desktop, but on an iphone or ipad, the background gets cut off:

Here is the HTML

<div class="footerPowell">

    <div class="footer-content">

        <div class="footer-location">

            <!--<h1>Locations</h1>-->
            <ul>
                <li>Address</li>
                <li>Address</li>
                <li>Address</li>
                <li>Address</li>
            </ul>

        </div><!--footer-location-->

    </div><!--footer-content-->

</div>

Here is the CSS:

.footerPowell{
    background-color:#000;
    height:500px;
    margin-top:-100px
}

.footer-content{
    width:1000px;
    margin:0 auto;
    color:#FFF;
    padding-top:130px;
}

.footer-location{
    width: 100%;
    text-align:center;
}

.footer-location h1{
    font-size:20px;
    padding-bottom:15px;
    color:#b9b9b9;
    font-family: 'gotham_htfbook';
}

.footer-location ul{
    list-style:none;
}

.footer-location ul li{
    font-family: 'gotham_htfbook';
    color:#808080;
    padding-bottom:3px;
    font-size:16px;
    display:inline-block;
    padding-right:10px;
}

.footer-location ul li a{
    color:#808080;
    text-decoration:none;   
}

Answer 1

Not sure exactly what you mean by cut-off, but you might want to try this

.footer-content{
    width: 100%;
    margin:0 auto;
    color:#FFF;
    padding-top:130px;
}

use percentage for your width to keep it 100% wide.