I am attempting to move this h1 element below my navigation section. Here is how I have structured it: there is a header tag, within the header tag there is a container tag, inside the container tag is the h1 tag, and after the h1 tag there is a nav tag which contains a ul with li elements.
.container {
width: 50%;
margin: auto;
}
/* Header */
header {
height: 100vh;
}
header h1 {}
/* An unordered list is basically an array of items*/
ul {
list-style-type: none;
float: right;
/* Top bottom right left*/
/* Margin-top pushes it down.*/
}
/* List item specifies how it should be aka 1 item of the array */
li {
display: inline-block;
/* Top bottom right left*/
}
/* A means all the links */
a {
text-decoration: none;
text-transform: uppercase;
color: black;
padding: 5px 20px;
/* Separates them */
border: 1px solid transparent;
}<div class="container">
<h1>Random Number Generator</h1>
<nav>
<ul>
<li class="active"><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
</nav>
</div>