Can you spread content out in Inline Flex?

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.

HTML…

<header>
		<div class="header">
			<img src='images/img-tea-cozy-logo.jpg' alt='logo' width=154>
		</div>
		<div class="header">
			<ul class="nav">
				<li>Mission</li>
				<li>Featured Tea</li>
				<li>Locations</li>
			</ul>
		</div>
	</header>

CSS…

.header {
	display: inline-flex;
}

.nav {
	display: flex;
	font-size: 22px;
	margin: 0;
	padding: 0px;
	list-style: none;
	gap: 2rem;
	text-decoration: underline;
	justify-content: end;
}

Hey @script8051554031

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.

I hope this helps :slight_smile:

Thank you! So does the inline flex container have to enclose both child flex boxes?

I think I made all your updates below, and that vertically centered the header links. But it’s still right up against the logo. Even with the ‘align-items: center’. Am I missing something?

	<header class="header">
		<div>
			<img src='images/img-tea-cozy-logo.jpg' alt='logo' width=154>
		</div>
		<div>
			<ul class="nav">
				<li>Mission</li>
				<li>Featured Tea</li>
				<li>Locations</li>
			</ul>
		</div>
	</header>
.header {
	display: inline-flex;
	align-items: center;
	justify-content: space-around;
}

.nav {
	display: flex;
	font-size: 22px;
	margin: 0;
	padding: 0px;
	list-style: none;
	gap: 2rem;
	text-decoration: underline;
	justify-content: end;
}

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:

header {
	display: inline-flex;
	align-items: center;
	justify-content: space-around;
    width: 100%;
}

This is what I meant as you can see there is no dot on header but it will work just as good.

Also I added a width on the code above as this code can’t work without applying a width on the flex container (which I should have also said on my first post, sorry again :sweat_smile:).

BEAUTIFUL! Many thanks :slight_smile: