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

Question

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!

Answer 1

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>