Can you help me align my h1 and ul elements on the same line in my header? I want to have my logo and navigation links next to each other (This extra text is just filler)
Below is the code snippet:
HTML:
<div id="header">
<h1>Logo</h1>
<ul>
<li><a href="index.html">Home</a> |</li>
<li><a href="fixtures.html">Fixtures & Results</a> |</li>
<li><a href="news.html">News</a> |</li>
<li><a href="players.html">Player</a> |</li>
<li><a href="table.html">Table</a> |</li>
</ul>
</div>
CSS:
#header{
margin:0px;
padding:0px;
color:white;
background-color:red;
width:100%;
}
#header h1{
display:inline;
}
#header ul li{
display:inline;
}
#header ul li a{
text-decoration:none;
font-size:16px;
font-weight:bold;
color:white;
}
#header ul li a:hover{
text-decoration:underline;
}