P element stretches nav with responsive web design - html

Question

I've been putting a website portfolio together for myself and I just got my home page done. I will say this because it pertains to my problem, I put a div after the header which includes my vertical navigation on the right side, a paragraph that I wanted next to the nav and a background image(id=background).I did this because I only wanted the image to cover the space between the header and the bottom of the page. I noticed every time the paragraph(p) went next to the nav, it would push the nav down. I got a tip from a different post to make the position absolute, which worked. I am now trying to make my home page a responsive web page for tablet and mobile and ran into a problem. I changed the nav to horizontal navigation below the header when changing the position of p to absolute, it stretches the nav space.(as you can see if you resize the page). Is there a way I can move the paragraph out of the div but still keep it in the same place on the regular page?
Here is my code:-
#import url('https://fonts.googleapis.com/css?family=Fjalla+One');
#import url('https://fonts.googleapis.com/css?family=Titillium+Web');
#import url('https://fonts.googleapis.com/css?family=Fira+Sans');
#import url('https://fonts.googleapis.com/css?family=Lobster');
#import url('https://fonts.googleapis.com/css?family=Overlock');
* {
margin: 0;
padding: 0;
}
#wrapper {
margin: 0 auto;
padding: 0;
}
#background {
display: block;
background-image: url(images/Untitled-1.jpg);
background-repeat: no-repeat;
background-size: contain;
overflow: auto;
height: 100%;
width: 100%;
}
header {
background: rgb(115, 78, 116);
width: auto;
padding: 1%;
}
p {
width: 20%;
font-size: 20px;
color: antiquewhite;
padding: 0;
margin: 0 auto;
position: absolute;
margin-left: 50%;
font-family: 'Overlock', sans-serif;
font-style: normal;
margin-top: 15%;
}
.icon {
list-style-type: none;
display: inline;
}
.list {
display: inline-block;
font-family: 'Fira Sans', sans-serif;
margin-right: 1%;
}
i {
display: inline;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
footer {
color: antiquewhite;
margin: 0;
padding: 0;
}
.h1 {
font-family: 'Fjalla One', sans-serif;
color: floralwhite;
font-size: 300%;
display: inline;
padding-right: 300px;
font-weight: bolder;
}
.name {
font-family: 'Lobster', sans-serif;
color: floralwhite;
display: inline;
font-weight: normal;
}
nav {
float: right;
}
.stretch {
list-style-type: none;
padding: 20px;
margin: 20px 0px;
border-radius: 50px 0px 0px 50px;
width: 250px;
height: 50px;
text-align: center;
text-shadow: 2px 2px black;
font-size: 150%;
font-family: 'Fjalla One', sans-serif;
background-color: rgb(40, 31, 17);
position: relative;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.stretch:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50px 0px 0px 50px;
background: rgb(91, 56, 29);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: antiquewhite;
}
.stretch:hover:before,
.stretch:focus:before,
.stretch:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/* ----------- phone ----------- */
/* Portrait and Landscape */
#media screen and (min-width: 320px) and (max-width: 640px) {}
/* ----------- tablet ----------- */
#media only screen and (min-width: 768px) and (max-width: 1024px) {
/*changing nav to horizontal postion*/
nav,
nav ul,
nav li,
nav a {
display: inline;
float: none;
width: 100%;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.stretch {
display: inline-block;
list-style-type: none;
padding: 10px;
margin: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
width: auto;
height: auto;
text-align: center;
text-shadow: 2px 2px black;
font-size: 100%;
font-family: 'Fjalla One', sans-serif;
background-color: rgb(40, 31, 17);
position: static;
/* removing nav animation*/
-webkit-transform: none;
transform: none;
-webkit-transform-origin: none;
transform-origin: none;
-webkit-transition-property: none;
transition-property: none;
-webkit-transition-duration: none;
transition-duration: none;
-webkit-transition-timing-function: none;
transition-timing-function: none;
}
.stretch:hover:before,
.stretch:focus:before,
.stretch:active:before {
-webkit-transform: none;
transform: none;
-webkit-transition-timing-function: none;
transition-timing-function: none;
}
#background {
background-color: rgb(40, 31, 17);
width: 100%;
background-image: none;
}
/*trying to get the background to display correctly*/
body {
background-image: url(images/Profile_2.jpg);
background-size: auto;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
/*moving the paragraph to the left since image will not display*/
p {
width: 20%;
font-size: 40px;
color: antiquewhite;
padding: 0;
margin-top: 10%;
margin-right: 40%;
font-family: 'Overlock', sans-serif;
font-style: normal;
position: static;
}
}
<div id="wrapper">
<header>
<ul class="icon">
<li class="h1">Tavyon <span class="name">Richardson</span>
</li>
<li class="list">TavyonRichardson#yahoo.com<i class="material-icons">mail_outline</i>
</li>
<li class="list">989-285-5133<i class="material-icons">call</i>
</li>
<li class="list">Alma, Michigan<i class="material-icons">location_on</i>
</li>
</ul>
</header>
<div id="background">
<p><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my my recent projects and resume.</p>
<nav id="navbar">
<ul class="nav">
<li class="stretch">About me
</li>
<li class="stretch">Courses
</li>
<li class="stretch">Projects
</li>
<li class="stretch">Blog
</li>
<li class="stretch">Resume
</li>
</ul>
</nav>
</div>
</div>