CODEWITHSUNDEEP
cssreactjsjsx
Abdelwahab
Abdelwahab

Reputation: 169

can't get flexbox justify content to behave properly

I'm trying to use justify-content space-between to align both elements in div .header__top on the opposite ends of the screen, but for some reason they sit right next to each other.

const HeaderHome = () => {
    return (
        <div className="header">
            <div className="header__top">
                <h1 className="primary-text">Text</h1>
                <Link className="Header__top--btn btn">Log In</Link>
            </div>
        </div>
    )
};

'''

.header{
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #485461;
    background-image: linear-gradient(315deg, rgba(72, 84, 97, 0.5) 0%, rgba(40, 49, 59, 0.5) 74%) ,url("./header.png"); 
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    object-fit: contain;
    overflow: hidden;
    
}
.header__top{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Upvotes: 0

Views: 31

Answers (1)

technophyle
technophyle

Reputation: 9159

justify-content: space-between only works if you set the width of the container.

So, add width: 100%; to .header__top.

Upvotes: 1

Related Questions