Hey I want my divs to appear in a single column like , but I am unable to achieve desired results.I want exact same 6 containers in multiple rows and a single column with the same styling as of this div. Any help will be appreciated

.dot:hover{
        box-shadow: 0 15px 30px rgba(0,0,0,.5);
    }
    .dot{
        position: absolute;
        top: 30%;
        left: 25%;
        transform: translate(-50%,-50%);
        padding: 20px;
        box-sizing: border-box;
        background: #D3D3D3;
        border-radius: 4px;
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
        display: flex;
        width: 600px;
        transition: .5s;
    }
    .dot .imgBx{
        width: 150px;
        flex: 0 0 150px;
    }
    .dot .imgBx img{
        max-width: 100%;

    }
    .dot .content{
        padding-left: 20px;
    }
    .dot .content p{
        text-align: justify;
    }
    
    .right{
        float: right;
        flex-wrap: wrap;
        flex-direction: column;
    }

<div >
    <div >
        <div >
            <img src="{% static 'images/banner/bg.PNG' %}">
        </div>
        <div >
            <p>Bangladesh's apparel exporters concerned as NBR firm on bond licencing</p>
        </div>
    </div>
    
</div>

CodePudding user response：

this line

position: absolute;

makes all your .dot DIVs render on the same position relative to the screen (in this particular case), i suggest removing it