Responsive content alignment react js / css-CodePudding

I have a problem with react js. I have 2 Links and an image. I want the children props to be at the middle of the page (justify-content: center) and another link image to be at the right position with the help of css.

header.js:

import styles from "./Header.module.css"
import React, {useState} from "react";
import Image from "next/image";
import Link from "next/link";

export default function Header({children}) {

return (
    <>
        <header className={styles.header}>
            {children}
            <Link id="link" href="/" passHref>
            Standort
        </Link>
            <Image src={"/location_on_FILL0_wght400_GRAD0_opsz48.png"} width={50} 
            height={50}></Image>

        </header>
    </>
)

}

css:

.header {
position: sticky;
top: 0;
width: 100%;
padding: 0.5em;
box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);
display: flex;
background-color: white;
justify-content: center;
}


.header > a {
color: black !important;
font-weight: bold;
font-size: 2em;
text-decoration: none;
 }

.link {
justify-content: right;
}

.header > a:hover {
text-decoration: underline;
  }

The Image and the Link Standort should be at the right position. And the props should be at the center like this (Ignore the Hamburger Menu).

CodePudding user response：

Have you considered using display: flex with justify-content: space-between?

<div >
  <div></div>
  <div></div>
  <div></div>
</div>

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

.header div {
  width: 100px;
  height: 100px;
}