After the content's padding is removed, the shopping cart area is still the same as when the padding was not removed. What's wrong? Looking for an error but can't find it?

Question

<style>
/*将网页自带样式清除*/
*{
    margin: 0px;
    padding: 0px;
}
/*去除a标签下划线*/
a{
    text-decoration: none;
    color: white;
}
/*设置浮动后要清除浮动*/
.clear{
    clear: both;
}
/*清除无序列表自带样式*/
ul{
    list-style: none;
}
/*黑色导航*/
.header{
    width: 100%;
    height: 40px;
    background-color: #333;
}
/*导航条-左侧-左浮动*/
.content_ul{
    height: 40px;
    float: left;
}
.content_ul li{
float: left;
    /*height: 40px;*/
}
.content_ul li a{
    color: #b0b0b0;
    font-size: 12px;

}
.content_ul li span{
    color: #424242;
    margin: 0 .3em;
}
/*导航条-右侧-右浮动*/
.content_ul_1{
    float: right;
    height: 40px;

}
.content_ul_1 li{
    float:left;
    height: 40px;
}
.content_ul_1 li a{
    color: #b0b0b0;
    font-size: 12px;

}
.content_ul_1 li span{
    color: #424242;
    margin: 0 .3em;
}
/*购物车*/
 .shopping{
    width: 90px;
    margin: 0px 5px;
    text-align: center;
    /*background-color: #424242;*/
    height: 40px;
}
</style>
<!--导航条部分-->
<!--header-->
    <div class="header">
        <!--content-->
        <div class="content">
            <!--导航条-左侧-左浮动-->
            <ul class="content_ul">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">金融</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li><a href="#">下载app</a><span>|</span></li>
                <li><a href="#">Select Location</a></li>
            </ul>
            <!--导航条-右侧-右浮动-->
            <ul class="content_ul_1">
                <li><a href="">登录</a><span>|</span></li>
                <li><a href="">注册</a><span>|</span></li>
                <li><a href="">消息通知</a></li>
                <li class="shopping"><a href="">购物车</a></li>
            </ul>
        </div>
        <!--content-->
    </div>
<!--header-->

Answer 1

Is it the same if the margin is removed or not? Please describe the problem in detail, I still don’t understand your question