css multiple div似乎无法一起工作

Question

我在我的css文件和html文件中有这个。

.prodhome-boxshadow{
    padding: 10px;
    box-shadow: 5px 10px 18px #888888;
}

.prodhome-category {
     width:22%;
     float:left;
     margin:0 1.65% 3.55%;
}
.prodhome-category img {
     max-width:60%;
     height:auto;
     margin:0 5%;
     align-content: center;
}

<div class="prodhome-boxshadow">
        
            <div class="prodhome-category">
                <h1>Product-title</h1>
                <img src="" />
            </div>
       
    </div>
    <div class="clearrow"></div>

我得到的是盒子阴影不包含产品标题和图像。相反，我在产品所在的位置上方显示了盒子阴影显示，并在显示Producttiles之前结束。我怎么能做到这一点？