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;
}