css - How to solve the problem of float elements falling

Question

Want to achieve this effect

But the current code is written like this

    <p class="main">
     <p class="left"></p>
     <p class="center"></p>
     <p class="right"></p>
    </p>

.main{

    margin: 0 auto;
width: 100%;
height: 100%;
overflow: hidden;

}

.left{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new01.jpg");

}
.center{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new02.jpg");
}
.right{
    width: 5rem;
    height: 3rem;
    float: left;
    margin: 2rem;
    background-image: url("/templates/CeHua/images/new03.jpg");
    
}

How should I solve it

I read a lot of replies about the width problem. After I change the width, the background image of p is not fully displayed. Is there a way to scale the photo to reduce the width?