Responsive content alignment react js / css

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).

It looks like you have used an ID selector (#link) instead of a class selector (.link)

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}>
        <div className={styles.childrenContainer}>{children}</div>
        <div className={styles.rightContent}>
          <Link href="/" passHref>
            <a className={styles.link}>Standort</a>
          </Link>
          <Image src={"/location_on_FILL0_wght400_GRAD0_opsz48.png"} width={50} height={50} />
        </div>
      </header>
    </>
  );
}

Also, use space-between to achieve the desired flex alignment, applied to the .header class:

.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: space-between; /* Adjust alignment between children and right content */
}

.childrenContainer {
  display: flex;
  align-items: center; /* Align children vertically in the middle */
}

.rightContent {
  display: flex;
  align-items: center; /* Align right content vertically in the middle */
}

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

.link:hover {
  text-decoration: underline;
}