I'm having trouble moving the "About me" header to the top of the section as it's currently positioned in the middle.
Another issue I'm facing is that my second paragraph is displaying on the same line as my first paragraph.
It's interesting to note that if I remove the "about" id, the layout fixes itself perfectly. However, I want to use flexbox and learn how to implement it properly, so I'd prefer not to take that shortcut unless absolutely necessary.
#about {
margin-top: 50px;
margin-left: 30px;
display: flex;
flex-flow: row;
}
.aboutme {
font-family: 'Indie Flower', cursive;
padding-top: 25px;
order: 1;
font-size: 2em;
}
.profile-photo {
position: relative;
top: 120px;
left: 20px;
order: 0;
max-width: 700px;
max-height: 500px;
border-radius: 50px;
}
p {
order: 2;
position: relative;
top: 50px;
left: 50px;
font-size: 1.25em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000
}<div>
<section id="about">
<img src="img/meprofile.jpg" alt="Photograph of" class="profile-photo">
<h2 class="aboutme">About me</h2>
<p>Hello!.</p>
<p>Check</p>
</section>
</div>