align text of LIs with other elements - html

Question

Our graphic designer sent me the following image for how our page should look:
So the text of the <li> elements should be aligned with the logo at the top and the heading above the list. I can't seem to find a way to specify this relationship precisely. I ended up tweaking the margin-left style of li until they seemed about even with the heading in my browser, but that doesn't seem like it will be reliable across different devices and browsers. There's no direct relationship between padding-left: 1em; on the #image-header and #instruction-header DIVs that contain the first two elements, and margin-left: 1.3em on #instructions li.
Is there a way to style these so that the alignment is assured?
And if I line up the text, can I be sure that the numbers won't end up outside the page boundary?
#image-header {
background-color: #fcfb91;
padding-top: 5px;
padding-left: 1em;
}
.image-container {
display: inline-block;
text-align: center;
vertical-align: middle;
}
#instructions li {
margin-bottom: 1em;
margin-left: -1.3em;
}
#instruction-header {
background-color: #336699;
color: white;
width: 20em;
padding-bottom: 2px;
padding-top: 2px;
padding-left: 1em;
}
<div id="image-header">
<div class="image-container">
<img src="//dev.bridgebase.com/barmar_test/mp/acbl/bbo.png" alt="BBO Logo">
</div>
<div class="image-container">
<img src="//dev.bridgebase.com/barmar_test/mp/acbl/invitetext.png" alt="Invite some friends">
</div>
</div>
<div style='font-family: "Ariel", sans-serif'>
<h3 id="instruction-header">How it works</h3>
<ol id="instructions">
<li>Every friend you invite who has not played an ACBL tournament on BBO is eligible for the promotion.</li>
<li>Each of you will earn BB$5 when your friend creates a BBO username (if he's not already a BBO user) and registers a valid ACBL number. The bonus will be automatically deposited in each of your BBO accounts.
</li>
<li>There is no limit to the number of bonuses you can earn within the deadline of the promotion.</li>
<li>Once you refer, each friend will receive an email from BBO.</li>
<li>The deadline is Nov 1, 2015. Your friend must use that referral email to successfully create a BBO username and register his ACBL number by that date for both of you to earn the bonuses.
</li>
</ol>
</div>

Answer 1

I think you should remove the left margin from #instructions li, and instead define the left-padding of #instructions ol. If you set it to 1em, it perfectly aligns with the logo
Edit: Here you go:
#image-header {
background-color: #fcfb91;
padding-top: 5px;
}
.image-container {
display: inline-block;
text-align: center;
vertical-align: middle;
}
#instructions, #image-header {
padding-left: 1em;
}
#instructions li {
margin-bottom: 1em;
}
#instruction-header {
background-color: #336699;
color: white;
width: 20em;
padding-bottom: 2px;
padding-top: 2px;
padding-left: 1em;
}
<div id="image-header">
<div class="image-container">
<img src="//dev.bridgebase.com/barmar_test/mp/acbl/bbo.png" alt="BBO Logo">
</div>
<div class="image-container">
<img src="//dev.bridgebase.com/barmar_test/mp/acbl/invitetext.png" alt="Invite some friends">
</div>
</div>
<div style='font-family: "Ariel", sans-serif'>
<h3 id="instruction-header">How it works</h3>
<ol id="instructions">
<li>Every friend you invite who has not played an ACBL tournament on BBO is eligible for the promotion.</li>
<li>Each of you will earn BB$5 when your friend creates a BBO username (if he's not already a BBO user) and registers a valid ACBL number. The bonus will be automatically deposited in each of your BBO accounts.
</li>
<li>There is no limit to the number of bonuses you can earn within the deadline of the promotion.</li>
<li>Once you refer, each friend will receive an email from BBO.</li>
<li>The deadline is Nov 1, 2015. Your friend must use that referral email to successfully create a BBO username and register his ACBL number by that date for both of you to earn the bonuses.
</li>
</ol>
</div>