宽度足够的时候元素还是被挤下去了

html

<div class="service">
    <div class="ser_title"></div>
    <!-- ser_title -->
    <div class="ser_content">
        <div class="ser_left li">
            <div class="ser_item">
                <img src="images/ser_web_ic.png">
                <h1>Web Design &amp; Development</h1>
                <span>ISAMA Pvt. Ltd. designs and develops creative websites utilizing the latest technologies.</span>
            </div>
        </div>
        <!-- ser_left -->
        <img src="images/service_bg2.jpg" class="ser_pic">
        <div class="ser_right ri">
            <div class="ser_item">
                <img src="images/ser_mob_ic.png">
                <h1>Mobile Applications</h1>
                <span>Our Developers helps you to Design, Develop &amp; Distribute Mobile Applications - Smarter &amp; Faster.</span>
            </div>
        </div>
        <!-- ser_right -->
    </div>
    <!-- ser_content -->
</div>

css

.service{
    height: 950px;
    width: 1400px;
    margin: 0 auto;
}
.ser_title img,.ser_item img{
    float: left;
    padding-right: 35px;
    padding-bottom: 70px;
    text-align: center;
    vertical-align: middle;
}
.ser_content{
    margin: 0 auto;
    width: 1400px;
}
.ser_left{
    margin-left: 140px;
}
.ser_pic{
    margin:80px 40px 0px;
}
.ser_item{
    height: 90px;
    margin-top: 100px;
    width: 500px;
}