<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="master_site_wrapper"> <main role="main"> <div class="container-fluid no-padding"> <section class="no-padding" id="destination-masthead"> <div id="masthead_wrapper" class="col-xs-12"> <div class="masthead-content-wrapper"> <div class="destinations-section-wrapper green"> </div> <div class="masthead-content"> <div class="title-container"> <h2 class="title">Hunting in the Northwest</h2> <h5 class="subtitle">Alaska, USA</h5> </div> </div> </div> </div> </section> </div> </main> </div> <style> body #master_site_wrapper { margin-top: 15px; } .container-fluid { padding-left: 0; padding-right: 0; } .no-padding { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } div#masthead_wrapper { display: inline-block; color: #fff; } .masthead-content-wrapper { background: url("https://s31.postimg.org/655b24muz/hunting.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: right center; height: 300px; } .destinations-section-wrapper { width: 45%; height: 0; } .masthead-content { width: 75%; margin: 0 auto; } /* Uses Flexbox to align text vertically */ .title-container { width: 50%; position: absolute; display: flex; justify-content: center; flex-direction: column; height: 300px; z-index: 10; } h2.title { font-family: 'Montserrat'; text-transform: uppercase; letter-spacing: 2px; font-size: 70px; line-height: 0.9; } h5.subtitle { font-family: 'Raleway'; text-transform: uppercase; letter-spacing: 2px; font-size: 20px; } @media screen and (max-width: 850px) { h2.title { font-size: 3em !important; } } @media screen and (max-width: 1200px) { .title-container { width: 70% !important; } }</style>