Wacky behavior - custom WP theme (barebones), HTML5

HTML & CSS
1

This is a wordpress custom theme. I’m just starting out with coding it and I’m totally baffled by my page title getting rendered inline with my nav which is itself inside the header. All marked up HTML5-wise.

http://jsdesignlab-dev.com/wp1/

2

I maybe should mention that both nav and header are set to display: block

article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block}

h1 {
	font-size: 3em;
	line-height: 1;
	margin-bottom: 0.5em;
}

header nav ul {
	margin-top: 60px;
}

	header nav ul li {
		float: left;
		font-size: 2em;
		text-transform: uppercase;
		letter-spacing: 1px;
		list-style: none;
		margin: 0 50px 30px 0;
		color: #2d4109;
	}

	header nav ul li:first-child {
		margin-left: -20px;
	}

		header nav ul li a {
			text-decoration: none;
			color: #2d4109;
		}

		header nav ul li a:focus, header nav ul li a:hover, header nav ul li a.current:hover {
			color: #3d6000;
			border-bottom: 6px solid #3d6000;
		}

		header nav ul li a.current {
			border-bottom: 6px solid #3d6000;
		}
3

I’m not sure if this is what you meant but as your nav is floated then the title will slide up alongside if there is room.

Clear the float:


.the-content{clear:both}