Try the code below: (then note the media queries at the end of the css - that's when you start to change the order of the page elements and size of page elements to fit specific screen widths - it's a bit of trial and error). Also at some point you might want to include a responsive menu option, but that's probably for another day.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jon McClain's Starbucks Mockup</title>
<style type="text/css">
.container {
}
.header {
background-color: #0e5635;
height: 300px;
}
body {
margin:0
}
img {
max-width: 100%;
height: auto;
}
.logoWrapper {
width: 250px;
height: 252px;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
.content {
margin-left: auto;
margin-right: auto;
max-width: 1280px;
overflow: hidden;
}
#articleHolderWrapper {
width: 80%;
overflow: hidden;
margin: 0 auto;
padding: 30px 0
}
.articleHolder_1 {
float: left;
width: 60%;
text-align: center;
}
.articleHolder_1 h1 {
font-size: 45px;
padding: 80px 0 0 0;
margin: 0;
}
.articleHolder_2 {
float: left;
width: 40%;
text-align: center;
}
body,td,th {
font-style: normal;
font-weight: 700;
font-family: cabin;
font-size: 16px;
}
h1,h2,h3,h4,h5,h6 {
font-family: cabin;
font-style: normal;
font-weight: 400;
}
.navContainer {
background-color: #000000;
border-radius: 0px 0px 60px 60px;
display: inline-block;
text-align: center;
width: 100%;
}
.navContainer ul {
margin: 0;
padding: 0;
}
.navContainer li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.navContainer a {
display: block;
text-decoration: none;
color: #fff;
font-weight: 400;
font-family: abel;
font-size: 30px;
padding: 14px 40px;
}
.footer {
width: 100%;
height: 100px;
background-color: #CCCCCC;
border-top: 10px solid #006633;
}
</style>
<style>
@media screen and (max-width: 850px) {
.articleHolder_1 h1 {
font-size: 35px;
}
}
@media screen and (max-width: 760px) {
.articleHolder_1 {
float: none;
width: 95%;
margin: 0 auto;
}
.articleHolder_1 h1 {
font-size: 45px;
padding: 0;
}
.articleHolder_2 {
float: none;
width: 60%;
margin: 0 auto;
}
}
</style>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/alice:n4:default;allan:n7:default;abel:n4:default;amaranth:n4:def ault;asap:n7:default;cabin:n7,n4:default.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="logoWrapper"><a href="starbucks.html">
<img src="http://jonmcclaindesign.com/starbucks/images/starbucks-logo.png" alt=""/></a></div>
</div>
<!-- end header -->
<div class="content">
<div class="navContainer">
<ul>
<li><a href="coffee.html">Coffee</a></li>
<li><a href="#">Menu</a></a></li>
<li><a href="#">Coffeehouse</a></a></li>
<li><a href="#">Responsibility</a></a></li>
<li><a href="#">Shop</a></a></li>
</ul>
</div>
<!-- end navContainer -->
<div id="articleHolderWrapper">
<div class="articleHolder_1">
<h1>Your next drink is on us</h1>
<p>...when you join our loyalty program My Starbucks Rewards™ and sign up for email.</p>
<p> </p>
<h2><a href="https://www.starbucks.com/account/create/register"><img src="http://jonmcclaindesign.com/starbucks/images/signup-button.gif" width="192" height="48" alt=""/></a></h2>
</div>
<!-- end articleHolder -->
<div class="articleHolder_2">
<img src="http://jonmcclaindesign.com/starbucks/images/starbucks-cup.png" alt=""/>
</div>
<!-- end articleHolder_2 -->
</div>
<!-- end articleHolderWrapper -->
</div>
<!-- end content -->
<div class="footer"></div>
</div>
<!-- end container -->
</body>
</html>