Hello, am humbly requesting for a rectification on my code using react and css in that i want my profile picture to appear on right hand side

Question

Here is my code in react and its respective CSS. but whenever I run the code I still get the profile picture on the left-hand side. In the guide that I was following, there was no use of columns just styling in CSS and the profile picture was appearing on right hand side of the page please help.

//here is the react.jsx file//

import React from 'react'
import './Intro.css'
import Github from '../../img/github.png';
import LinkedIn from '../../img/linkedin.png';
import Instagram from '../../img/instagram.png';
export const Intro = () => {
  return (
    <div className="i-left">
        <div className="i-name"> 
        <span> Hi! I Am</span>
        <span> Rick_Bigfish</span>
        <span> Frontend Developer with high level of experience in web designing  and development</span>
        </div>
        <button className='button i-button'> Hire me</button>
        <div className="i-icons">
          <a href='#'>
          <img src={Github} alt=""/>
          </a>
          <a href='#'>
          <img src={LinkedIn} alt=""/>
          </a>
          <a href='#'>
          <img src={Instagram} alt=""/>
          </a>
        </div>
        <div className='profile-picture'>
         <div className='profile-picture-background'>
        </div>
         </div>
    </div>
  )
}

// here is the css file is shown below;
.intro{
    display: flex;
    height: 77vh;
    margin-top: 6rem;
}
.i-left{
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: column;
    gap: 2rem; 
}
.i-name{
    display: flex;
    flex-direction: column;
}
.i-name>:nth-child(1){
    color: var(--black);
    font-weight: bold;
    font-size: 3rem;
}
.i-name>:nth-child(2){
    color: var(--orange);
    font-weight: bold;
    font-size: 3rem;

}
.i-name>:nth-child(3){
    font-weight: 100;
    font-size: 14px;
    color: var(--gray);
    margin-top: 10px;
}
.i-button{
    width: 6rem;
    height: 2rem;
}
.i-icons{
    margin-top: 3rem;
    display: flex;
    gap:0rem ;
}
.i-icons>*{
    transform: scale(0.5);
}
.i-icons>*:hover{
    cursor: pointer;
}
.profile-picture{
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0px 0px var(--white);
    border-radius: 50%;
    height: 380px;
    width: 380px;
    margin: 0 0px 0 100px;
} 
.profile-picture-background{
    height: 92%;
    width:92% ;
    background-image: url('../../img/profile5.jpg');
    background-size: cover;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
}
.profile-picture-background:hover{
    transform: scale(1.07);
    transition:1s ease-out ;
}