Can't figure out how to center a div to the page

Question

I have two blocks of text with colored background. I want them to sit next to each other and then be horizontally centered on the page but I can't get them to center on the page. Also I have to use inline styling because I am just coding on wordpress for work. Help!

<div align="center">
<div style="background-color: #526f87; width: 60%; float: left; height: 160px; " >
<p style="font-size: 40px; color: #b9cbea; letter-spacing: 2px; line-height: 110%; padding-top: 20px; padding-right: 20px; text-align: right;">YOU'RE NEEDED AT THE TOP </p>
<p style="font-size: 40px; color: white; letter-spacing: 2px; line-height: 110%; padding-bottom: 20px; padding-right: 20px; text-align: right;" ><strong>MEET US THERE</strong>
</p>
</div>
<div style="background-color: #526f87; width: 20%; float: left; margin-left: 10px; height: 160px;">
<p style="color: #ffffff; font-size: 20px;" align="center">22 ICF CEUs <br /><span style="font-size: 12px;">(12.17 Core Competencies / 10.25 Resource Development)</span></p>
</div>
</div>

Answer 1

In general, you should know that there is a trick for centering divs on the page. If you want to center some content, you know what its width will be, right? So you can use:

width: /* something */;
margin-left: auto;
margin-right: auto;

So for your code snippet, I recommend using flex if you're not targetting old browsers. I would do something like this:

 <div style="display: flex; width: 80%; margin-left: auto; margin-right: auto;"> <div style="flex: 3">this is the larger div to the left</div> <div style="flex: 1">this is the one that should fall on the right</div> </div> 

NOTE: My code keeps proportions with the ones in your code.