Need help positioning things within the nav bar

I’ve got my nav bar working but need help positioning text/links within the nav bar. The nav bar is too wide and I can’t seem to get the text and links spaced correctly. What I want to do is get the word family to be centered on a second line instead of the way it is now. When I tried to do that in design view in Dreamweaver it wouldn’t let me and I’m unsure of how to code it. Then I need to position the text inward, away from the left edge. Right now it is but up against the left edge which makes for a bad design. I would also like the nav bar to go the whole width of the page rather than the way it is now. Oh and do you think the sizing of the text, both the links and the rest to be of a good size? Any help is greatly appreciated!


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

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

	<h1 id="pagename">Home</h1>
	<h2>Welcome to the Lawtons</h2>

</div><!-- end of wrapper -->


@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;
	height: 113px;
    header h1 {
	font-size: 40px;
	color: #ffffff;
	position: absolute;
	width: 426px;
	left: -1px;
    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;

	position: absolute;
	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: 120px 20px 20px; /* top sides bottom */


Can you create a codepen demo and share it?

What is codepen? I’m new and haven’t heard of that.

No wait, I figured it out… I will get that to you once I get to a PC/Mac, right now I’m on an iPhone…

Here is my codepen: Oh and I don’t want Home on the page in white… somehow once I got my nav bar text in white, it made that white.

I had your code open in a pen late last night and was looking at it. You might find something useful in there. Disregard the drop down menu at small screen size, it is not finished

Thanks alhazen1, this is awesome… I do have another question about creating a photo gallery. I will post the code I have when I get the chance.

I tried copying your code into Dreamweaver and it isn’t working… What do I need to do? Here is what I got

When I try to do a Real-time preview in Dreamweaver it says:

You tried to access an external HTML page, which can not be opened on the device for preview. Open the page in Dreamweaver to preview the page on the device.

What do I need to do to get it to preview?

As mentioned I’m also stuck on creating the gallery page. I need to be able to get the photos to enlarge in a separate window using JavaScript. I also cannot seem to get the nav bar right on this page.

Note: the code at line 100 in the CSS is part of a new file called shadowbox.css (not part of main.css) and the JavaScript is in a new file called shadowbox.js