I am currently attempting to make a simple header with HTML and CSS. I have encountered a problem where my button list is not floating to the right, giving the site an odd appearance.
I tried floating the list to the right, floating the ul to the right and as you can see here floating the div to the right.
When I only added the list into a seperate site it actually did float to the right but once I pasted in my CSS it stopped. I couldn't find what was causing it.
@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 need any info please do ask, I may have forgotten something.
I am very new to web development so please don't tear me to shreds if my code is bad.