Here is a screenshot of what I am talking about: http://i.imgur.com/pgt618X.png

When I added the two column layout, it seems my right column is shifted down by one line. Meaning, the top of the box is uneven with the left side.

My code:

body { background-color:white; margin: 0% 0% }

section { background-color:white; margin-top:0% 0%; padding-right:15px; height:100%; } header { background-color:#465E84; }

header h1 { margin: 0% 0%; text-align:center; padding-top:4px; padding-bottom:3px; font-family: 'Bungee Inline', cursive; }

header h1 small { font-family: 'Gloria Hallelujah', cursive; }

header a { text-decoration:none; color:white; }

h2 { margin: 0% 0%; padding-top:0.5em; }

p { word-wrap:break-word; padding-bottom:0.5em; display:block; }

nav { background-color:#89cff0; margin: 0% 0%; text-align:center; }

nav ul { margin: 0% 0%; padding-top:0.5em; padding-bottom:0.5em; list-style:none; padding-left:0px; }

nav ul li { display:inline; text-align:center; margin: 0% 0%; padding-left:4px; padding-right:4px; }

nav ul li a { text-align:center; margin: 0% 0%; text-decoration:none; color:#465E84; font-family: 'Fjalla One', sans-serif; }

nav ul li a:hover { color:white; }

p { margin: 0% 0%; }

foot {

margin: 0% 0%;
background-color:#465E84;
height:100%;
bottom:0;
position:relative;
text-align:center;
color:#89cff0;

}

wrapper {

min-height: calc(100vh - 18px);

}

/* ======= Media Query ========== */

@media (min-width:200px) {

section h2 {
    padding-left:7px;
    padding-right:7px;
    font-size:18px;
}

p {
    padding-left:7px;
    padding-right:7px;
    font-size:15px;

}

}

@media (min-width:780px) {

section h2 {
    padding-left:20px;
    padding-right:20px;
    font-size:22px;
}

section p {
    padding-left:20px;
    padding-right:20px;
    font-size:18px;
}

.col {
    display:inline-block;
    max-width:50%;
    margin-right:-4px;
    background-color:#999;
}

}