I’m working on the Tea Shop project, and I’ve put the ‘logo’ and ‘header links’ on the same line using an inline flex box. The ‘header links’ are their own flex box made with a unordered list.
Now that they are on the same line, the ‘header links’ content box is shrunk down and I can’t figure out how to get it to justify all the way right. Also, if I add height to the ‘header links’ box, it adds to the bottom and actually lowers it so it appears like a footer to the ‘logo’.
Can someone help me figure out what I’m doing wrong? I’m guessing I need to figure out how to stretch the content box width to fill the rest of the line, but I can’t figure it out.
You can achieve this by making the <header> tag (not the class .header) your flex container and add the property justify-content: space-between;. Then add align-items: center; to either <ul class="nav"> or <div class="header"> to align it vertically with the logo.
My bad I made a mistake that I corrected on my first post it was not space-around but space-between.
You don’t need to create a class to apply flexbox, you can apply your CSS by selecting the tag directly: