Problem: Images are centred but slightly left aswell

Hi there, I need help with a CSS problem for my website. I tried to float and then centre my 2 images - side by side, but the images are centred as well as slightly to the left. How to I make both images centered properly?

HMTL:

        <div class="image_info">

            <!-- image 1 -->
            <div class="cap_pic">
                <!-- image goes here -->
                <img src="images/00_job.png" width="250" height="167" alt="Part-time job - png " />

                <!-- caption goes here -->
                <div class="caption">
                    Getting a part-time job is a great way to earn and save your own money. Apply for a job at your local shops or volunteer at charity stores.
                </div>
                <!-- image 1 ends -->

            <!-- image 2 -->
            </div>

            <div class="cap_pic">
                <!-- image goes here -->
                <img src="images/02_savings.png" width="250" height="167" alt="Counting money for savings - png" />

                <!-- caption goes here -->
                <div class="caption">
                    Budgeting can help you become more aware of how you spend your money. Try budget your weekly spendings on a peice of paper.
                </div>
                <!-- image 2 ends -->
            </div>
        
        <p><b>Above are some tips to help you start saving!</b></p>
        </div>
        
    </div>

CSS:

div.image_info{
margin: auto;
align-content: center;
display: inline-block;
}
div.cap_pic{
float: none;
}
div.caption{
width: 450px;
text-align: center;
font-size: 16;
font-weight: bold;
padding: 5px;
margin: auto;
}

change css class “div.cap_pic” to like this:
div.cap_pic {
float: left; text-align: center;
}

Sponsor our Newsletter | Privacy Policy | Terms of Service