I am struggling to align my top horizontal navbar to the right next to the header that reads "Best TV Ever". I have already floated it to the right, but now I need it to move up to the top of the page.
Can anyone help me with this?
Here is the link to the jsfiddle: https://jsfiddle.net/qkLgqmfh/
Below is the code snippet:
h1{
background-color: black;
background-image: url(logo.png);
background-repeat: no-repeat;
font-family: Peralta;
color: white;
height: 100px;
padding-top: 25px;
padding-left: 150px;}
h2{
font-family: Peralta;
text-align: center;
height: 25px;
background-color: white;
padding-top: 0;
height: 50px;
}
p{
border-bottom: 1px solid black;
padding-bottom: 3em;
display: block;
overflow: hidden;
height:130px;
}
img{
float: left;
margin-right: 1em;
width: 150px;
height: 100px;
padding-left: 10px;
border-radius: 20px;}
ul li {
display: inline-block;
float: right;
padding-top: 0;
}
.topnav ul li a:link{
text-decoration: none;
color: black;
background-color: white;
border-radius: 50%;
margin: 15px;
}
<body>
<div class="wrapper">
<div id="masthead">
<h1>Best TV Ever</h1>
</div>
[insert menu toggle here]
[insert menu checkbox here]
<div class="topnav">
<ul>
<li><a href="#">50s</a></li>
<li><a href="#">60s</a></li>
<li><a href="#">70s</a></li>
<li><a href="#">80s</a></li>
<li><a href="#">90s</a></li>
</ul>
</div>
I've been staring at my computer screen for hours and cannot seem to figure out this simple task. My mind feels exhausted, and I'm hitting a roadblock. Can someone please provide guidance on this issue?