Need help position Contact Form below Nav Bar

I’m having a problem… I’m not sure how to position my contact form below my nav bar. Currently my nav bar overlaps my contact form. I would also like to add a picture to the left of the contact form, right now the contact form takes up the whole space. Any help is greatly appreciated!

CSS:

@charset "utf-8";
/* CSS Document */
 
#wrapper {
    width: 1920px;
    min-height: 1080px;
    position: relative;
	margin: 0 auto;
    background-color: #5DD7FE
}
 
header {
    width: 1778px;
    min-height: 62px;
    background-color: #808080;
    position: absolute;
    top: 0;
    left: 50px;
}
 
    header h1 {
        font-size: 40px;
        color: #ffffff;
        position: absolute;
        width: 425px;
    }
     
    header nav ul li {
        list-style-type: none;
        display: inline-block;
 	}
     
    header nav ul li a {
        text-decoration: none;
		color: #ffffff;
        font-size: 18px;
	}
 
    header nav ul li a:hover {
            color: red;
	}
            
	header nav {
         position: absolute;
         top: 6px;
         left: 500px;
    }

section{
	position: absolute;
	top:190px;
	left: 154px;
	width: 1634px;
}

/* Style inputs with type="text", select elements and textareas */

input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jackson Lawton_homePage</title>
<link href="_CSS/main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="wrapper">
	<header>
		<h1>Jackson Lawton and Family</h1>
		<nav>
			<ul>
				<li><a href="index.html">Home</a>
				</li>
				<li><a href="contact.html">Contact</a>
				</li>
				<li><a href="media.html">Media</a>
				</li>
				<li><a href="gallery.html">Gallery</a>
				</li>
				<li><a href="resume.html">Resume</a>
				</li>
			</ul>
		</nav>
	
	</header>

	
<div class="container">
  <form action="action_page.php">

    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
		<option value="australia">Australia</option>
      	<option value="canada">Canada</option>
      	<option value="france">France</option>
		<option value="germany">Germany</option>
		<option value="ireland">Ireland</option>
		<option value="japan">Japan</option>
		<option value="poland">Poland</option>
		<option value="russia">Russia</option>
		<option value="spain">Spain</option>
		<option value="uk">UK</option>
		<option value="ukraine">Ukraine</option>
		<option value="">USA</option>
		<option value="other">Other</option>
	
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">

  </form>
</div>
	
</div>
</body>
</html>

As I’m new to web design, I’m not quite sure what you mean… Where in the code would that be? Would I have to create a section exclusively for the contact form, if so where would that go? Any help is greatly appreciated!

Since you don’t have any links to other parts of the page simply adding a little more padding-top on .container will push that out from under your navbar.

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 120px 20px 20px; /* top sides bottom */
}

Of course if you remove some of your positioning the header and your form would naturally flow one after the other and none of this would be necessary.