Issue- How can we relocate the line below "Hi I'm a developer that loves clean & elegant code"
From this location
https://i.sstatic.net/UgrC9.png
to this location
https://i.sstatic.net/6yEMO.png
HTML snippet (sequencing must remain intact EX.cannot simply move "Hi, i'm a developer..." just above the "A little bit about me" line)
<body>
<header>
<div class="full-width">
<div class="half-width">
<h1>Jubilee Austin</h1>
</div>
<div class="half-width">
<h2><span>Hi,</span> i'm a developer that loves clean & elegant code.
</h2>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<section id="about">
<div class="full-width">
<h2>A little bit about me</h2>
<div class="half-width">
<p> i've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism.As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
</div>
<div class="half-width">
<p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
</div>
</div>
</section>
All CSS styles
/****Base syles***/
body {
font-family: 'Source Sans Pro', sans-serif;
}
#about, #work, #contact {
height: 600px;
border: solid red;
}
/***Grid***/
.full-width{
width:1200px;
margin: 0 auto;
}
.half-width{
width:600px;
float:left;
}
.third-width{
width:400px:
float:left;
}
/***About specific***/
#about .full-width{
padding:80px 0;
}
#about h2{
font-family: 'Lora', serif;
font-size:36px;
color:#262a2b;
}
#about p{
font-size:21px;
color:#7f7f7f;
line-height:42px;
padding-right:50px;
}