'How do I center my project images? They seem to want to stay to the left, I don't know how to fix it

I'm having issues centering the images under "My Projects" section. I would really appreciate it if anyone could give me some tips to center them. It does however stay centered when the dimensions are responsive, but when it's at full-screen it will only stay to the left. How do I change the code such that images will stay centered, with consideration for more images in the future.

Picture of my problem

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --ff-primary:'Overpass Mono', monospace;
    --ff-secondary:'Source Code Pro', monospace;

    --fw-reg: 300;
    --fw-bold: 900;

    --clr-bg: #fff;
    --clr-dark: #0d2e1e;
    --clr-accent: #98ec98bd;

    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-body: 1rem;
    
    --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25), 0.125em 0.125em 0.25em rgba(0,0,0,.15); 
}



body {
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
}
section {
    padding: 5 em 2em;
}
img {
    display: block;
    max-width: 100%;
}

h1 h2 h3 {
    line-height: 1;
    margin: 0; 
  
}
h1 {
   font-size: var(--fs-h1) ; 
}
h2 {
    font-size: var(--fs-h2);
}
h3 {
    font-size: var(--fs-h3)
}

.section__title {
    margin-bottom: .25em;
}
.section__title--intro {
    font-weight: var(--fw-reg);
}
.section__subtitle {
    margin: 0;
    font-size: var(--fs-h3)
}
.section__subtitle--intro,
.section__subtitle--about {
    background: var(--clr-accent);
    /*background-color: lightblue;*/
    padding: .25em 1em;
    font-family: var(--ff-secondary);
    margin-bottom: 1em;
}
.section__subtitle--work {
    color: white;
    font-weight: var(--fw-bold);
    margin-bottom: 2em;
}
.intro {
    position: relative;
}
header {
    background-color: var(--clr-dark);
    /*display:inline;
    flex-direction: row;
    justify-content: space-between;
    padding: 1 em;
    */
}
.nav {
    color: var(--clr-light);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.nav a {
    color:white;
    text-decoration: none;
}
.nav li {
    list-style: none;
    display:flex;
    justify-content: space-evenly;
}

.intro__img {
    box-shadow: var(--bs);
}
.section__subtitle--intro {
    display:inline-block; 
}
.about-me__img {
    box-shadow: var(--bs);
}
.my-work {
    background-color: var(--clr-dark);
    color: var(--clr-light);
    text-align: center;
}
.portfolio {
    /*
    display flex and flexdirection should be deleted
    display:flex;
    flex-direction: row;
    display:grid;
    grid-template-columns: repeat(auto-fit, minxmax(300px, 1fr));
    max-width: 400px;
    margin: 0 auto;
    */
    flex:30%;
    padding: 5px;
}
.container {
    display:flex;
}
.portfolio_item {
    background: var(--clr-accent);
    overflow:hidden;
}
.portfolio__img {
    /*width: 100%*/
    
    width: 250px; height: 250px;
    transition: 
        transform 750ms cubic-bezier(.5, 0, .5,1),
        opacity 250ms linear;
}
.portfolio__img:hover,
.portfolio_item:focus .portfolio__img {
    transform: scale(1.2);
    opacity: .75;
}


@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas:
        "img title"
        "img subtitle";
        grid-template-columns: min-content max-content;
    }
    .intro__img {
        grid-area: img;
        min-width: 250px;
        position: relative;
        z-index: 2;
    }

    .section__subtitle--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 1.5em);
    } 
.footer {
    background: #111;
    color: whitesmoke;
    text-align: center;
    padding: 2.5em 0; 
    font-size: var(--fs-h3);
}
.footer a {
    color: inherit;
    text-decoration: none;
}
.footer__link {
    font-weight: var(--fw-bold);
}

.footer__link:hover,
.social-list__link:hover {
    opacity: .7;
}
.footer__link:hover {
    text-decoration: underline;
}
.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
}
.social-list__item {
    margin: 0 .5em;
}
.social-list__link {
    padding: .5em;

}


@media (min-width: 600px) {
    .about-me {
        display: grid;
        grid-template-columns: 1fr 200px;
        grid-template-areas: 
        "title img"
        "subtitle img"
        "text img";
        grid-column-gap:2em;
    }
   .section__title--about {
        grid-area: title;
    }
    .about-me__img {
        grid-area:img;
    }
    .section__subtitle--about{
        grid-column: 1/-1;
        grid-row: 2; 
        position: relative;
        left: -1em;
        width: calc(100% + 2em);
        padding-left: 1em;
        padding-right: calc(200px + 4em);
        /*text wont touch the image*/
    }
    .about-me__img {
        grid-area: img;
        position: relative;
        z-index: 2;
    }

@media (min-width: 800px) {

    .about-me {
        max-width: 1000px;
        margin: 0 auto; 
    }
    :root {
        --fs-h1: 4.5rem;
        --fs-h2: 3.75rem;
        --fs-h3: 1.5rem;
        --fs-body: 1.125rem;
        }
    }
}
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content ="width=device-width, initial-scale=1.0"/>
    <title>Sensess' Portfolio</title>
    <link rel="stylesheet" href="style.css">
    
<!--Fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300&family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f671b77a0f.js" crossorigin="anonymous"></script>

</head>
  <body>
<!--Navigation-->  
      <header>
        <nav class="nav">
          <ul class="nav__list">
            <li class="nav__item"><a href= "#home" class="nav__link">Home</a></li> 
            <li class="nav__item"><a href="#about" class="nav__link">About Me</a></li>
            <li class="nav__item"><a href="#work" class="nav__link">My Projects</a></li>
            <li class="nav__item"><a href="#contactme" class="nav__link">Contact Me</a></li>
          </ul>
        </nav>
    </header>
<!--End of Navigation--> 

     
<!--introduction-->

    <section class="intro" id="home">
        <h1 class="section_title section_title--intro">
            Hey, I'm <strong>Sensess</strong>
        </h1>
        <p class="section__subtitle section__subtitle--intro">Aspring Front-End Dev</p>
        <img src="Me.JPG" alt="" class="intro__img">
     </section>
<!--About Me-->

    <section class="about-me" id="about">
        <h2 class="section__title section__title--about">Who I am</h2>
            <p class="section__subtitle section__subtitle--about">Current GWU Full-Stack Developer Student based out of NOVA</p>
        
            <div class="about-me__body">
            <p>DJFKLDSJFKDSLJFEWNFIOEWNFIOEWFOIWEJFOIEWJFIOWEJFOWEJF</p>
            <p>WJFEWJOIFJEWOIFJWOEIGJOIWEFJOIWEJFOIEWJFOIWEJFOIWEJF</p>
        </div>
        <img src="aboutme.jpg" alt="" class="about-me__img">
    </section>

    <!--My Projects-->

    <section class="my-work" id="work">
        <h2 class="section__title section__title--work">My Projects</h2>
        <p class="section__subtitle section__subtitle--work">An overview of the work I've done </p>
        <!--delete this--><div class="container"
        <div class="portfolio">
            <!--Project 1-->
            <a href="#" class="portfolio__item"><img src="horiseonmockup.jpg" alt="Project 1" class="portfolio__img"></a>
             <!--Project 2-->
            <a href="#" class="portfolio__item"><img src="runbuddymockup.jpg" alt="Project 2" class="portfolio__img"></a>
             <!--Project 3-->
            <a href="#" class="portfolio__item"><img src="javascriptpasswordmockup.jpg" alt="Project 3" class="portfolio__img"></a>
        </div>
    </div>
    </section>

    <!--Footer-->

    <footer class="footer">
        <a href="mailto:[email protected]" class="footer__link" id="contactme">Email Me</a>
            <ul class="social-list">
                <li class="social-list__item">
                    <a class="social-list__link" href="https://github.com/amadayasuki">
                        <i class="fa-brands fa-github"></i>
                    </a>
                </li>
                <li class="social-list__item">
                    <a class="social-list__link" href="https://www.linkedin.com/in/sensess-yentzer-915882160/">
                        <i class="fa-brands fa-linkedin"></i>
                    </a>
                </li>
                <li class="social-list__item">
                    <a class="social-list__link" href="https://www.instagram.com/linglinglomeinnnn/">
                        <i class="fa-brands fa-instagram-square"></i>
                    </a>
                </li>
            </ul>
        </footer>
    </body>
</html>

html css

Solution 1:^[1]

I've solved your problem. Just replace your CSS of .portfolio with the below code.

    .portfolio {
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
       width: 100%;
       padding: 5px;
    }

Solution 2:^[2]

You have left one <div class="container"> open so first please fix it and than make below changes:

 .portfolio {
   flex-direction: row;
flex-wrap: no wrap;
display: flex;
margin-left: auto;
margin-right: auto;
   justify-content: center;
   width: 100%;
   padding: 5px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dharmik Patel
Solution 2	Alap Joshi

'How do I center my project images? They seem to want to stay to the left, I don't know how to fix it

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]