How do I vertically center text and have the dark blue bar go across the entire screen

Question

I'd like to vertically and horizontally center my text "New from Subaru". Also, I have a dark blue background on the text. I would like that dark blue background to extend horizontally on the entire div. How would I do that?

Jsfiddle: http://jsfiddle.net/huskydawgs/eL7rwLx3/21/

 wrapper-promo { background-color: #3862ad; border: 2px solid #2251a4; margin: 10px 0; width: 500px; } .title-top { background-color: #2251a4; display: table; height: 40px; overflow: hidden; } .title-top-cell { display: table-cell; vertical-align: middle; } .promo-content { margin: 20px; } h2 { font-family:SegoeBold; font-size:1.4em; color:#fff; margin: 10px 0 -10px 0; } h2.block-title { margin: 0; text-align: center; } h3 { font-family:SegoeBold; font-size:1em; color:#fff; } .promo-content p { font-family: helvetica, Arial,sans-serif; font-size: 14px; color: #fff; line-height: 20px; }

 <div class="wrapper-promo"> <div class="title-top"> <div class="title-top-cell"> <h2 class="block-title">New from Subaru</h2></div></div> <div class="promo-content"> <h2> Subaru Guide for Small Business</h2> <h3> Starts at $45/month</h3> <p> Adventure has a stylish side. The 2015 Subaru Outback was designed to allow you to experience the world like you never have before.</p> </div> </div>

Answer 1

If you do this it will stretch out your block title div all the way in your title-pop div.

h2.block-title {
margin: 0 auto;
text-align: center;
width: 100%;
}