Having some trouble shifting the CSS around!

Hello,

If you visit http://www.yohoasianbistro.com/, you will see the Special Offer box on the right hand side.

This is what I am attempting to make the box look like with CSS:

However, I've toyed with the CSS a bit but am unable to make it happen. Any suggestions on how to re-format the current CSS code would be appreciated.

Thank you!

 

You'll need to make the <p class="special"> as <div class="special">.

Here is the markup & CSS that will make it happen. Move the inline CSS to appropriate classes.

<div class="special" style="height: 130px; text-align:center; ">

  <span style="display: block; padding:0 0 15px;">
    Special Offer
  </span>
  
  <div style="float: left; text-align: center; width: 178px;">
    Buy 1 <br> Get 1 free
  </div>
  
  <div style="float: right; text-align: center; width: 178px;">
    Buy 2 <br> Get 1 free
  </div>
  
</div>

Code (markup):

 

That works perfectly. Thank you so much!!