How to Align HTML Classes in CSS with a Flex Layout

February 16, 2024

I am strugging to align the borders vertically between two different containers in a flex layout.

I have a class named “navbar” and a class named “header-content.” Both classes are children nested in the “header” class.

“header-content” is sized appropriately and fills the screen as desired using the justify content: space around.

I want to align the far edges of the “navbar” class so that the empty space aligns vertically with the text in both parents.

I have tried adding a margin of 300px to the “navbar” class which delivers the results when the webpage is fully expanded. But if the screen is reduced in size the parameters do not hold and the vertical alignment is lost between both classes.

Please review the following code:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Landing Page</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <div class="header">
        <div class="navbar">
            <div class="header-logo">Header Logo</div>
            <ul>
                <li>header link one</li>
                <li>header link two</li>
                <li>header link three</li>
            </ul>     
        </div>
        <div class="header-content">
            <div class="hero">
                <h1>This website is awesome</h1>
                <p>This website has some subtext that goes here under the main title.  It's a smaller font and the color is lower contrast</p>
                <button>Sign Up</button>
            </div>
            <div class="img">
                <p>This is a placeholder for an image</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS:

.header {
    display: flex;
    flex-direction: column;
    background-color: #1F2937;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}


.header-logo, h1 {
    color: #F9FAF8
}

.header-logo {
    font-size: 24px;
}

ul, p {
    color: #E5E7EB;
    font-size: 18px;
}

ul {
    list-style-type: none;
    display: flex;
    gap: 16px
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    
}

.hero {
    width: 420px;
}

h1 {
    font-size: 48px;
}

button {
    background: royalblue;
    border: 1px solid royalblue;
    color: white;
    padding: 8px 32px;
    border-radius: 10px;
}

Desired Layout looks like this:

[Desired Layout looks like this:] (https://i.stack.imgur.com/xxOYd.png)

Current layout without a margin size assigned to the navbarclass

Margin size added to navbar class

Page minimized with margin still in use

>Solution :

Add some padding in header class
Remove padding from navbar class
replace justify-content: space-around by justify-content: space-between in header-content class