Help with text box positioning over background image.

I'm trying to position a div with text in it in a specific spot over a background image, which I've gotten to work, but my problem now is getting it to stay where it needs to be and resize along with the size of the window. I'm planning on using media queries for specific sizes, but it starts to look wonky at in between places too. Any ideas? Here's a .jpg of my photoshop mockup http://ift.tt/1MJzhjh

Here's how I currently have it coded - html - <section class="main-image"> <div class="container"> <div class="headline-box"> <h1>NEW & USED RECORDS</h1> <h3>34 CARLISLE ST<br/>HANOVER, PA</h3>

 </div> </div> </section> 

CSS

.main-image { margin: none; clear: both; width: 100%; height: 1331px; background-image: url("../images/background.jpg"); background-size: contain; position: relatlive; }

.headline-box {

width: 23%; position: absolute; left: 52%; bottom: 2%; top: 2%; right: 10%; display: inline-flex; flex-wrap: wrap; 

}

.headline-box > h1 { font-size: 11em; color: #15284b; line-height: 1em; display: inline-block;

} .headline-box > h3 {

text-align: right; margin: 0; color: #7daed3; 

}

Also the h3 text is appearing really far below the h1 text, I can't seem to get it directly under the h1 text. Any help is greatly appreciated, thanks!

Epic visual tool

Epson 5030UB 2D/3D 1080p 3LCD Projector Submitted November 28, 2015 at 01:41AM by mikestearns http://ift.tt/1Oli7uG