Hello, I'm just learning CSS and have a problem with formatting I can't seem to figure out, and can't find the answer to via Google. Using external css I've made a simple horizontal Nav bar, and a vertical Nav bar using a (ul) of links. The top bar seems to work, but my problem, when run, the header text (h2) displays beneath the side Nav links, instead of at the top to the right of them. I suspect I'm one property off, but can't seem to find it. Any help appreciated ...

My HTML code:

<html>
<head>
<title>Page Title</title>
<!-- attach CSS file to this page -->
<link rel="stylesheet" href="TAPStyle.css">
</head>

<body>
<ul id="topnav">
<li><a href="Test1.html">Top 1</a></li>
<li><a href="Test3.html">Top 2</a></li>
<li><a href="Test4.html">Top 3</a></li>
</ul>

<h1>Page Banner</h1>

<ul id="sidenav">
<li><a href="Test1.html">Button 1</a></li>
<li><a href="Test2.html">Button 2</a></li>
<li><a href="Test3.html">Button 3</a></li>
<li><a href="Test4.html">Button 4</a></li>
</ul>

<br>

<h2>This is title bar for each section on page</h2>

<p>This is body of text</p>

<h2>This is title bar for each section on page</h2>

<p>This is body of text</p>

<br>


<footer>
<p>[Copyright 2017]</p>
</footer>

</body>
</html>


My CSS code (external file) ...
--------------------------------------------------------

ul#topnav {
/*position: fixed; /*fixes position even on scroll/*
list-style-type: none; /*removes default bullets from list items*/
margin: 0; /*removes browser default settings*/
padding: 0;
background-color: dimgray; /*of each link*/
}

#topnav li {
display: inline-block;
}

#topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

#topnav li a:hover {
background-color: purple;
}

ul#sidenav {
list-style-type: none; /*removes default bullets from list items*/
margin: 0; /*removes browser default settings*/
padding: 0;
}

#sidenav li a {
display: block;
width: 240px;
text-align: center;
padding: 14px 16px;
margin-top: 8px; /*Sets vertical space between link buttons*/
color: white; /*font*/
background-color: black;
text-decoration: none;
}

#sidenav li a:hover {
background-color: purple;
}


body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
color: black;
background-color: white;
margin-top: 0;
margin-right: 16px;
margin-bottom: 16px;
margin-left: 16px;
padding: 0;
}


h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
text-shadow: 3px 2px black;
margin: 0px;
margin-bottom: 0;
padding: 4px;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;

}


h2 {
color: white;
background-color: black;
font-size: 1.5em;
margin-left: 280px;
padding: 2px;
padding-left: 14px;
}



h3 {
color: #999;
font-size: 1.25em;
margin-left: 280px;
}


p {
line-height: 21px;
margin-left: 280px;
}

------------------------------------------
Thanks,
--Shannon