Error with CSS position: relative, position: absolute, etc

I am trying to make a portfolio website. However, there is a CSS positioning error that I am encountering. I was wondering, with keeping the image inside of the 'container', so i can center it, how I could scoot it down a little bit.

import "./App.css";

export default function App() {
  return (
    <div className="App">
      <div className="container">
        <div className="text-container">
          <h1>Hey, I'm <span>Jaxson</span>.</h1>
          <p>I am a <u>13 year old</u> front-end developer. I am top of my class in computer programming. I am know: JavaScript, HTML, CSS, Java, and Python. I am learning React JS and Kotlin. I also have joined the lego robotics team, and coded my Stem Tank (Science Fair) project using an Arduino Uno.</p>
        </div>
        <div className="image-container">
          <img src="https://mail.google.com/mail/u/1?ui=2&ik=417fae867b&attid=0.1.1&permmsgid=msg-f:1764564355309681295&th=187cfdee9d8cba8f&view=fimg&fur=ip&sz=s0-l75-ft&attbid=ANGjdJ8XCKr1gjbLPb5wVB7i2eN66jk6W7ZrdvifuuNWQcPW9ndJ7taOUyxM0YTgBK33mWCfVe2RGtiz7rLlUC_-pxRp5MuDFZzBykhX6bv7f_oGtA3BD1UK5HAmSN8&disp=emb"></img>
        </div>
      </div>
    </div>
  )
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Quicksand&display=swap');
html {
     min-height: 100%;
}
body {
     height: 100%;
     width: 100%;
     background-color: #191a1d;
}
h1 {
     color: #f6f5ff;
     font-family: Quicksand;
}
p {
     color: rgb(212, 212, 212);
     font-family: Poppins;
     font-weight: 200;
}
h1, p {
     width: 450px;
}
.container {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
}
span {
     background-image: linear-gradient(to right, #dd5e89, #f7bb97);
     background-clip: text;
     -webkit-text-fill-color: transparent;
}
img {
     height: 250px;
     border-radius: 10px;
     position: relative;
}
.text-container, .image-container {
     display: inline-block;
     border: 1px dashed red;
}
.image-container {
     
}

<3

I was trying to give it some extra margin or padding but that didn't work. Help!

You might want to refer to this StackOverflow answer of using flexbox to center your element: https://stackoverflow.com/a/19461564/8888888

The general idea is you need to have your parent element set to flexbox with display: flex, then you can align the children with the other flexbox properties.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&family=Quicksand&display=swap');

.App {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Other existing CSS below */

html {
  height: 100%;
}

body {
  min-height: 100%;
  width: 100%;
  background-color: #191a1d;
  margin: 0;
}

h1 {
  color: #f6f5ff;
  font-family: Quicksand;
}

p {
  color: rgb(212, 212, 212);
  font-family: Poppins;
  font-weight: 200;
}

h1,
p {
  width: 450px;
}

span {
  background-image: linear-gradient(to right, #dd5e89, #f7bb97);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

img {
  height: 250px;
  border-radius: 10px;
  position: relative;
}

<div class="App">
  <div class="container">
    <div class="text-container">
      <h1>Hey, I'm <span>Jaxson</span>.</h1>
      <p>I am a <u>13 year old</u> front-end developer. I am top of my class in computer programming. I am know: JavaScript, HTML, CSS, Java, and Python. I am learning React JS and Kotlin. I also have joined the lego robotics team, and coded my Stem Tank
        (Science Fair) project using an Arduino Uno.</p>
    </div>
    <div class="image-container">
      <img src="https://placekitten.com/250/250" />
    </div>
  </div>
</div>