In CSS Justify-content property does not work-CodePudding

I need to space around the contents in my div boxes but somehow the justify-content doesn't work.

 *{
        box-sizing: border-box;
    }
    
    html{
        width: 360px;
        height: 1553px;
        overflow-x: hidden;
    }
    
    header{
        display: flex;
        position: absolute;
        width: 100%;
        height: 62px;
        margin: 0px;
        left: 0px;
        top: 0px;
    }
    
    .logo {
        display: flex;
        position: inherit;
        background: linear-gradient(0deg, rgba(56, 54, 54), rgba(102, 95, 95));
        width: 30%;
        height: 62px;
        margin: 0px;
        left: 0px;
        top: 0px;
        align-items: center;
        justify-content: space-around;   
    }
    
    .logo img {
        position: inherit;
        width: 6.25vw;
    }
    
    .logo h1 {
        position: inherit;
        font-size: 2.50vw;
        font-family: 'Lucida Sans', sans-serif;
        color: white;
        text-shadow: 1px 1px rgb(41, 40, 40);
        margin: 0px; 
    }

<body>
    <header>
        <div >
            <img src="assets/logo.svg">
            <h1><i>HEADER</i></h1>
        </div>
    </header>
 </body>

This will be a responsive design, so I don't know how to space them evenly without this property. Now this property gives me centered image and text, but they overlap each other.

CodePudding user response：

You should cancel position: inherit; from logo

*{
    box-sizing: border-box;
}

html{
    width: 360px;
    height: 1553px;
    overflow-x: hidden;
}

header{
    display: flex;
    position: absolute;
    width: 100%;
    height: 62px;
    margin: 0px;
    left: 0px;
    top: 0px;
}

.logo {
    display: flex;
    background: linear-gradient(0deg, rgba(56, 54, 54), rgba(102, 95, 95));
    width: 30%;
    height: 62px;
    margin: 0px;
    left: 0px;
    top: 0px;
    align-items: center;
    justify-content: space-around;   
}

.logo img {
    position: inherit;
    width: 6.25vw;
}

.logo h1 {
    position: inherit;
    font-size: 2.50vw;
    font-family: 'Lucida Sans', sans-serif;
    color: white;
    text-shadow: 1px 1px rgb(41, 40, 40);
    margin: 0px; 
}

<body>
    <header>
        <div >
            <img src="assets/logo.svg">
            <h1><i>HEADER</i></h1>
        </div>
    </header>
</body>

CodePudding user response：

Try to replace inherit position attribute with relative for logo css.