Align text and img inside a div - html

Question

Currently doing the portfolio challenge at codecamp. I´m trying to align a text above another text, and then a img next to them. But it seems like they don´t recognize the blank space inside my div.
Here is my code
#div1 {
width: 80%;
height: 500px;
background-color: #A09F9C;
text-align: center;
margin-left: 10%;
}
#about {
color: white;
width: 500px;
height: auto;
padding-top: 10%;
padding-left: 5%;
}
#avatar {
width: 300px;
height: 300px;
float: right;
border-radius: 50%;
margin-right: 5%;
margin-top: auto;
}
<div id="div1">
<p id="about">aaaaaaaaaaaaaaaaaaaaaaaaaaa ...</p>
<img id="avatar" src="http://i.imgur.com/scMYPYt.jpg">
<h4> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </h4>
</div>
This is how it's supposed to look like.
If you want to take a look, here it's my codepen.

Answer 1

Check here:
`http://codepen.io/anon/pen/JKaqbE`
Btw I suggest you to learn to use materialize or bootstrap for faster development.
HTML:
<div id="navtab">
<ul>
<li class="button"> ABOUT</li>
<li class="button"> PORTFOLIO</li>
<li class="button"> CONTACT</li>
</div>
<div>
<div id="div1">
<p id="about"> The name is Gaston and I'm an UX/UI designeveloper, with extensive practical experience in brand strategy, creative direction and project management; devoted to Functional Programming and Information Architecture. Also a huge fan of semantics and futuristic interfaces.</p>
<img src="http://i.imgur.com/scMYPYt.jpg">
<div id="spdline"></div>
</div>
<div id="div2">
<h4> PORTFOLIO </h4>
</div>
<div id="div3">
</div>
</div>
<div id="div4">
</div>
<div id="div5">
</div>
CSS:
body {
background-color: grey;
}
#navtab {
background-color: purple;
height: 60px;
position: fixed;
width: 100%;
}
ul {
padding-top: 15px;
padding-right: 15px;
float: right;
margin-right: 10%;
}
li {
display: inline-block;
padding: 5px 15px 5px 15px;
}
li:hover {
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
a {
color: grey;
}
a:hover {
color: #2B303A;
text-decoration: none;
}
li:active {
background-color:white;
text-decoration: none;
}
a:active {
color: black;
text-decoration: none;
}
#div1 {
width: 80%;
background-color: #A09F9C;
text-align: center;
margin-left: 10%;
display: inline-flex;
}
#about{
padding: 10% 10%;
color: white;
float: left;
}
img {
width: 200px;
height: 200px;
border-radius: 50%;
margin-top: 10%;
margin-right: 10%;
margin-bottom: 50%;
float: right;
}
#spdline {
width: 300px;
height: 3px;
background-color: white;
display: block;
}
#div2 {
width: 80%;
background-color: white;
text-align: center;
margin-left: 10% ;
}
#div1, #div2, #div3 {
border-style: solid;
border-width: 1px;
border-color: grey;
}