Align Absolute Position on Top Center in CSS/Styled Components

Issue

I have a back button and a title that I wanted to put on the top and they should be aligned. My problem is how can I put the "Hello World" title to the top center while the back button on the top left?

CLICK HERE

 <HeaderTopContainer>
    <BackContainer>
      <BackArrow src="arrow.svg" alt="back" />
      <BackText> Back </BackText>
    </BackContainer>
    <Title>Hello World</Title>
  </HeaderTopContainer>

Solution

https://codesandbox.io/s/heade-styled-components-forked-yjirb?file=/src/Header.js

  <HeaderTopContainer>
    <BackContainer>
      <BackArrow src="arrow.svg" alt="back" />
      <BackText> Back </BackText>
    </BackContainer>
    <Title>Hello World</Title>
    <BackContainer></BackContainer>
  </HeaderTopContainer>

  const BackContainer = styled.div`
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width:100px
  `;

check this, I put a dummy back button container after the title and give the same width as the left back button container

after that flex will do the job,

Note: the body has a margin of 8px as default, that make a scroll in it please undo that if not needed

Answered By - bibin antony