If you’d like to use flexbox to accomplish this with your code as it stands, you’ll have to target your <header>, since it wraps both the logo and the nav. However, and maybe my eyes are playing tricks on me, it seems you’re closing your .container div before you close your <header>, even though you open your <header> after you open your .container.
HI, thanks for the response. I made the changes you suggested. I’m still learning about alignment, etc so if you help with how to get the logo and nav bar lined up and the nav bar to the right I would appreciate it. Also, if you have any suggestions on learning about alignment that would be appreciated as well.
Say you have an element (We’ll use a div in this example, even though you targeted the header - both are block-level HTML elements) and you have two main elements contained by it. Your div will have a class container and the two elements contained by it will have classes site-logo and nav-links respectively. Let the set-up look like this:
In your case, the logo image is square with a lot more white space on the top and bottom of the graphic and text than on the sides. I would resize the photo height-wise if you want to use flexbox as demonstrated above. Otherwise, the vertical alignment of the nav links will be with the center of your oversized image, which will make things look awkward.
To move the site logo in from the left and the nav links from the right, you could use either the margin property of each or the padding property of the container.
Also, don’t forget that I targeted a div with the class container; it’s fine to target the header element in your case.
There’s a lot out there about alignment of elments, and MDN Docs are the best source of info, IMO.