I'm struggling to position my ul menu at the top right corner of the page and adjusting the spacing between the items. Whenever I try to add padding, it disrupts the inline display. What am I missing here?
#menu {
top:0;
width:100%;
height:12%;
position:absolute;
display: flex;
align-items: center;
}
li {
display:inline-block;
position:relative;
}
#menu ul {
float:right;
margin-right:5%;
}
h1 {
margin-left:5%;
}<div id="menu">
<h1>My Headder</h1>
<ul>
<li><a href = "index.html">Hello</a></li>
<li><a href = "index.html">home</a></li>
<li><a href = "index.html">CONTACT</a></li>
</ul>
</div>