Struggling to create a clean header using HTML and CSS, I'm facing an issue where my button list refuses to float to the right, resulting in an awkward layout.
I attempted various methods like floating the list, floating the ul, and even floating the div to no avail.
Oddly enough, when I isolated the list on a separate page, it did float correctly to the right. But as soon as I integrated my CSS, the problem resurfaced without any clear cause.
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
header {
display: inline-flex;
background-color: grey;
width: 110%;
margin-left: -10px;
margin-right: -10px;
margin-top: -10px;
height: 100px;
align-items: center;
}
.logo {
height: 100px;
margin-top: -4px;
font-family: "Montserrat", sans-serif;
}
ul li {
font-family: "Montserrat", sans-serif;
font-size: 18px;
width: max-content;
list-style-type: none;
display: inline;
padding: 10px;
}
.headerButton {
transition: 0.1s ease-in;
color: black;
text-decoration: none;
font-weight: 500;
width: 10px;
}<header>
<a href="https://codepen.io/ThatCanadianKid_/full/qBwgVpJ">
<img src="https://www.kadencewp.com/wp-content/uploads/2020/10/alogo-4.png" class="logo">
</a>
<div style="float:right;">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</header>If you require further details, feel free to ask. I'm relatively new to web development, so please be gentle with your critique of my code.