为什么我这个不往右边挤了了呢

/* CSS Document */
body,div,dl,dt,dd,ul,li,ol,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,input,textarea{
	margin:0; 
	padding:0; 
	font-family:"Helvetica Neue", Helvetica, Arial,sans-serif;}

ol,ul,li{
	list-style:none;
}

a{
	text-decoration:none; 
	display:block; 
}

img{
	border:none;
	display:block;
}

.clearfloat:after{
	
	display:block;
	clear:both;
	content:"";
	visibility:hidden;
	height:0;
}

.clearfloat{
	zoom:1;
}

.index-menu .menu-list{
margin-top:150px;
color:#555;
overflow:hidden;
}
.index-menu .menu-list ul{
widht:1160px;
}
.index-menu .menu-item{
float:left;
width:520px;
margin-right:60px;
margin-bottom:56px;
}
.index-menu .menu-item .title,.index-menu .menu-item .line{
float:left;
}
.index-menu .menu-item .price{
float:right;
}
.index-menu .menu-item .title{
width:230px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.index-menu .menu-item .comment{
margin-top:4px;
color:#b7b7b7;
font-size:12px;
}
.index-menu .menu-item .line{
margin-top:10px;
width:192px;
border-top:1px solid #e3e1e1;
}

        <div class="public-container menu-list">
        	<ul class="clearfloat">
        		<li class="menu-item clearfloat">
                	<a class="title">
                    	<h4>Voluptate cillum fugiat.</h4>
                        <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                    </a>
                    <div class="line"></div>
                    <div class="price">$50</div>
                </li>
                
                <li class="menu-item clearfloat">
                	<a class="title">
                    	<h4>Voluptate cillum fugiat.</h4>
                        <p class="comment">Cheese, tomato, mushrooms, onions.</p>
                    </a>
                    <div class="line"></div>
                    <div class="price">$50</div>
                </li>
        	</ul>
         </div>