image-1656816830596

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/float2.css">
</head>
<body>
<ul class="box">
    <li><img src="https://npm.elemecdn.com/hassan-assets/img/cover_involution.png" alt=""><p>Introduction:Love life every day!</p></li>
    <li><img src="https://npm.elemecdn.com/hassan-assets/img/cover_involution.png" alt=""><p>Introduction:Love life every day!</p></li>
    <li><img src="https://npm.elemecdn.com/hassan-assets/img/cover_involution.png" alt=""><p>Introduction:Love life every day!</p></li>
    <li><img src="https://npm.elemecdn.com/hassan-assets/img/cover_involution.png" alt=""><p>Introduction:Love life every day!</p></li>
</ul>
</body>
</html>

css

* {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}
.box {
    width: 1226px;
    height: 285px;
    background-color: white;
    margin: 0 auto;
}
.box li {
    width: 296px;
    height: 285px;
    background-color: lightgrey;
    float: left;
    margin-right: 14px;
}
.box li:last-child {
    margin-right: 0;
}

.box li img {
    width: 100%;
    height: 200px;
}