头部header和重要信息都有问题

相关代码：

header.css

.header{

    width: 100%;

    height: 100%; 

    display: flex;

    justify-content: center;

    align-items: center;

    /* background-color: yellow;  */

    transition: background 0.5s;   

}

/* 滑动后改变颜色 */

.header-transition{

    background-color: rgba(25,196,138,0.9);   

}

.header-nav{

    display: flex;

    align-items: center;

    width: 89.333333%;

    height: 17px;

    /* padding: 35px 20px;*/

} 

.header-img-shape{

     margin-left: 274px;  

}   

content.art

<div class="content">

    <!-- 图片 -->

    <div class="content-img-layout">

        <img src="./content-bg.png" class="content-img" alt=""> 

    </div> 

     <!--重要信息  -->

    <div class="content-info">

        <h1 class="content-title">

            北京直飞福冈5天往返含税机票

        </h1>

        <div class="content-tags">

            <span>赠送接机</span>

            <span>赠当地游项目</span>    

        </div>

        <div class="content-counts">

            <span>浏览 24004</span>

            <span class="sold">已售138份</span>

        </div>

    </div>

</div>

content.css

 .content{

     width: 100%;

     height: 100%;

 }

 .content-img-layout{

     width: 100%;    

 }

 .content-img{

     width: 100%;

 }

 .content-info{

    width: 100%;

    background-color: pink; 

     align-items: center;

     padding: 16px 20px;

     border-bottom:2px solid #dadada ;

 }

 .content-info .content-title{

     width: 100%;

     font-size: 14px;

     color: #333333;

     margin-bottom: 8px;

 }

 .content-tags span{

     padding: 5px 12px;

     border: 1px solid #5278A0;

     color: #5278A0;

     font-size: 14px;

     margin-right: 12px;

 }

 .content-tags{

     margin-bottom: 12px;

 }

 .content-counts{

    width: 100%;

    font-size: 12px;

    color: #999999;   

 }

​