Organizing HTML and CSS: Elements are overlapping each other

I am trying to finish up a web design project right now and am running into an issue where elements are overlapping each other (see attached screenshot). The image of me is supposed to be padded on the left, with the silver text box to the right, with some space between the image and the box. Below those two elements are supposed to be the word "Blog", and a line below that is supposed to be the text-box that has MEDLIFE Peru Service Learning trip and the lorem ipsum text.

Current view of website

Attached below is my code:

CSS followed by HTML.

@import url('http://ift.tt/2wxCM9Y');
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}
body{
    background: #507A98;
}
a{
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition:.5s;
    -webkit-transition: .5s;
    transition: .5s;
    text-decoration: none;
}
em{
    font-style: oblique;
}

strong{
    font-style: bold;
}
img{
    width: 100%;
}
h1,h2,h3,h4,h5,p{
    font-family: "Montserrat", sans-serif;
}
h3{
    text-transform: capitalize;
    font-size: 1.875em;
    padding: 0 0 1% 0;
    font-weight: 800;
    color: #000000;
}
header{
    background: url(../img/home-hero-image.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
}
.hero-image h1{
    font-size: 6em;
    text-align: center;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 800;
    line-height: 1.5em;
}
.hero-image h2{
    font-size: 2em;
    text-align: center;
    color: #ffffff;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: .09em;
}
.container{
    max-width: 960px;
    margin: 0 auto;
    font-family: "Montserrat, sans-serif";
    -webkit-animation-delay: 4s;
    animation-delay: 2s;
}
.about-me{
    padding: 4%;

}
.about-me p{
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    line-height: 1.8;
    color: #DCDCDC;
    letter-spacing: .03em;
    margin: 5px auto;
    font-size: 1.2em;
    padding: 2% 0;
}
.about-me p a{
    color: #E1CCC9;
    border-bottom: 2px solid;
}
.text-box-about-me{
    float: left;
    text-align: left;
    width: 480px;
    height: 100%;
    background:silver;
}
.main-textbox-content{
    padding: 4% 8%;
}
.main-textbox-content p{
    line-height: 1.8;
    letter-spacing: .03em;
    font-size: 1em;
}
.image-area {
    width: 240px;
    height: 240px;
    overflow: hidden;
    border-color: bisque;
    border-style: solid;
    border-width: 3px;

}
.peru-blog{
    height: 300px;
    padding: 2% 0;
}
.peru-blog h3{
    padding: 4% 0;
}
.full-textbox{
    float: center;
    text-align: left;
    width: 480px;
    background-color: #fff;
    height: 100%;
}
.full-textbox-content{
    padding: 4% 8%;
}
.full-textbox-content p{
    line-height: 1.8;
    color: #661166;
    letter-spacing: .03em;
    font-size: 1em;
}
.left{
    float: left;
}
.right{
    float: right;
}
.contact-me{
    width: 100%;
    padding: 5% 0;
    margin-top: 5%;
    clear: both;
}
.contact-me-content{
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
.contact-me-content h4{
    font-size: 1.2em;
    padding: 1% 0;
    color: #fff;
    font-weight: 200;
    letter-spacing: 0.04em;
}
footer{
    background-color: #E0CCC8;
    color: #fff;
    padding: 2% 0;
    width: 100%;
    clear: both;
    height: 100px;
}
.footer-content{
    max-width: 960px;
    padding: 2% 0;
    margin: 0 auto;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    line-height: 1.4;
    color: #011833;
    letter-spacing: .03em;
    font-size: 1em;
}
.copyright{
    float: left;
}
.social-media{
    float: right;
}
.social-media li{
    display: inline;
}
.social-media li a{
    color: #011833;
    padding: 0.2em;
    font-soze: 1.8em;
    font-weight: 600;
}
.social-media li a:hover{
    color: #fff;
}

<!DOCTYPE HTML>
<html>
    <head>
        <title>Anutr Sivakoses | Personal Website</title>
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <header>
            <div class="hero-image">
                <h1>Anutr Sivakoses</h1>
                <h2>Student at the University of Nevada, Reno</h2>
            </div>
        </header>
        <div class="container">
            <section class = "about-me">
                <div class="about-me-content">
                    <h3>Hey there, i'm anutr!</h3>
                </div>
                <div class="image-area left">
                    <img src="img/about-me-profile.jpg">
                </div>
                <div class=text-box-about-me>
                    <div class="main-textbox-content">
                        <p>lorem ipsum dolor</p>
                    </div>
                </div>
            </section>
            <h3>Blog</h3>
            <section class= "peru-blog">
                <div class="full-textbox">
                    <div class="full-textbox-content">
                        <h3>MEDLIFE Peru Service Learning Trip</h3>
                        <p>lorem ipsum dolor sit amet.</p>
                    </div>
                </div>
            </section>
            <section class="contact-me">
                <div class="contact-me-content">
                    <h4>For any inquiries, please contact me at: <a class-"contact-me-email" href="mailto:anutr.sivakoses@gmail.com">anutr.sivakoses@gmail.com</a></h4>
                </div>
        </div>
        <footer>
            <div class="footer-content">
                <p class="copyright">Copyright&copy; 2017 Anutr Sivakoses</p>
                <ul class="social-media">
                    <li>
                        <a href="#" target="_blank">Facebook</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">Instagram</a>
                    </li>
                    <li>
                        <a href="#" target="_blank">LinkedIn</a>
                    </li>
                </ul>
            </div>
        </footer>
    </body>
</html>