Need some help on why my links aren't positioned where they should be.Only the :first-child seems to be aligned where it should.
* { margin: 0; padding: 0;}body { min-height: 100vh; background-image: url(images/bgimage.avif); background-size: cover; background-repeat: no-repeat; background-position: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}nav { background-color: white; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);}nav ul { width: 100%; display: flex; justify-content: flex-end; align-items: center; list-style: none;}nav li { height: 50px;}nav a { height: 100%; padding: 0 30px; display: flex; align-items: center; color: black; text-decoration: none;}nav a:hover { background-color: #f0f0f0;}nav li:first-child { margin-right: auto;}<nav><ul><li><a href="#"><img src="images/oms.png" style="height: 45px;"></li><li><a href="#">Services</li><li><a href="#">About</li><li><a href="#">Contact</li></ul></nav>Only the first child is sitting inside the navbar, while all other list items are sitting below.
Any help would be great. Thanks a lot!
At first I thought it could be because I had a size set to an image.I removed the image from question, and then the next list item became first child but the problem still existed for the remaining elements.
I tried setting the margin to 0 for nav a elements, still no luck.