'Innovation Cloud' - divs break apart at small screen width


#1

At large screen widths, my preview looks similar to the key; however, when the screen width is reduced the different sections pop apart, while in the key they remain nice and snug against each other:

I thought maybe 'vertical align' would do the trick, but it doesn't seem to have worked. See below for CSS/HTML, and thanks for any tips!


CSS:
html, body {
margin: 0;
padding: 0;
background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-background-size: cover;
}

body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}

p {
padding: 0px;
}

.container {
margin: 0 auto;
max-width: 940px;
padding: 0 10px;
}

/* Header */
.header {
height: 800px;
text-align: center;
color: #FFF;
text-transform: uppercase;
}

.header .container {
position: relative;
top: 200px;
}

.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0;
margin-bottom: 80px;
}

@media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}

.header p {
font-weight: 500;
letter-spacing: 8px;
margin-bottom: 40px;
margin-top: 0;
}

.btn {
background: #000;
padding: 1em;
color: #FFF;
}

.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}

/* Nav */
.nav ul {
list-style: none;
margin: 0 auto;
text-align: center;
}

.nav li {
display: inline-block;
line-height: 80px;
color: #FFF;
padding: 0px 10px;
transition: background .5s;
}

.nav li:hover {
background: #117bff;
cursor: pointer;
color: #FFF;
padding: 0px 10px;
transition: background .5s;
}

.nav {
vertical-align: top;
background-color: #000;
padding: 0;
}

/* Main */
.main {
vertical-align: top;
background-color: #FFF;
padding: 30px;
}

.main img {
float: left;
height: 20%;
width: 20%;
}

.main .container {
margin: 80px auto;
}

/* Jumbotron */
.jumbotron {
vertical-align: top;
height: 600px;
text-align: right;
background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-background-size: cover;
}

.jumbotron .container {
color: #fff;
position: relative;
padding: 30px;
top: 220px;
}

/* Footer */
.footer {
font-size: 14px;
background: #000;
color: #FFF;
}

/* Media Queries */
@media (max-width: 500px) {
.header h1 {
font-size: 50px;
line-height: 64px;
}

.main, .jumbotron {
padding: 0 30px;
}

.main img {
width: 100%;
}
}


HTML:









Cloud


Connect your ideas globally


Learn More

<div class="nav">
  <div class="container">
    <ul>
      <li>Register</li>
      <li>Schedule</li>
      <li>Sponsors</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
</div>

<div class="main">
  <img src="https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" />
  <div class="container">
    

    <h2>The Innovation Cloud Conference</h2>
    <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
    <p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
     <p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
  </div>
</div>

<div class="jumbotron"> 
	<div class="container">
    <h2>The Innovation Cloud Conference</h2>
    <p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
    <a class="btn" href="#">Learn More</a>
  </div>
</div>

<div class="footer">
	text test
</div>