How do I expand a flex box to the left and right with css?

Question

So I'm setting up a baseline for a portfolio for this project and I want the projects on the home page so when I hover over them they expand a bit. Everything is working fine except I want the boxes' height and width to expand evenly on all sides. The boxes seem to be expanding toward the center when I hover over them.

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project {
  width: 200px;
  height: 200px;
  border: 15px solid rgb(2, 2, 59);
  padding: 50px;
  margin: 20px;
  text-align: center;
}

.project:hover {
  width: 250px;
  height: 250px
}

#proj1 {
  background-image: url("https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80");
  background-size: cover;
  background-position: center;
}

h2 {
  padding: 3%;
}

<main>
  <section>
    <section class="project" id="proj1">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat veniam alias, beatae, eos quidem nostrum tempore provident molestiae officia qui vero at sed consectetur reprehenderit repellat hic omnis aliquam! Saepe!</p1>
    </section>
    <section class="project" id="proj2">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id doloribus possimus quod excepturi perferendis! Eius illo, officia nihil culpa natus maiores totam dolorem animi facilis, quae reiciendis in blanditiis quam!</p1>
    </section>
  </section>
  <section>
    <section class="project" id="proj3">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
    <section class="project" id="proj4">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
  </section>
</main>

Answer 1

If you use transform: scale(1.2); instead, then your objects will keep their position and size in the document flow. Here is an example:

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project {
  width: 200px;
  border: 15px solid rgb(2, 2, 59);
  padding: 40px;
  margin: 40px;
  text-align: center;
  transition: transform .5s;
}

.project:hover {
  transform: scale(1.2);
}

#proj1 {
  background-image: url("https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80");
  background-size: cover;
  background-position: center;
}

h2 {
  padding: 3%;
}

<main>
  <section>
    <section class="project" id="proj1">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat veniam alias, beatae, eos quidem nostrum tempore provident molestiae officia qui vero at sed consectetur reprehenderit repellat hic omnis aliquam! Saepe!</p1>
    </section>
    <section class="project" id="proj2">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id doloribus possimus quod excepturi perferendis! Eius illo, officia nihil culpa natus maiores totam dolorem animi facilis, quae reiciendis in blanditiis quam!</p1>
    </section>
  </section>
  <section>
    <section class="project" id="proj3">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
    <section class="project" id="proj4">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
  </section>
</main>

Answer 2

You should probably be using scale transforms instead of pixel sizing. You can then specify the transform origin.

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.project {
  width: 200px;
  height: 200px;
  border: 15px solid rgb(2, 2, 59);
  padding: 50px;
  margin: 20px;
  text-align: center;
  transition: all 0.3s;
}

.project:hover {
  transform: scale(1.05);
}

#proj1 {
  background-image: url("https://images.unsplash.com/photo-1587145820266-a5951ee6f620?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y2FsY3VsYXRvcnxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80");
  background-size: cover;
  background-position: center;
}

h2 {
  padding: 3%;
}

<main>
  <section>
    <section class="project" id="proj1">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat veniam alias, beatae, eos quidem nostrum tempore provident molestiae officia qui vero at sed consectetur reprehenderit repellat hic omnis aliquam! Saepe!</p1>
    </section>
    <section class="project" id="proj2">
      <h2>Project Name</h2>
      <p1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Id doloribus possimus quod excepturi perferendis! Eius illo, officia nihil culpa natus maiores totam dolorem animi facilis, quae reiciendis in blanditiis quam!</p1>
    </section>
  </section>
  <section>
    <section class="project" id="proj3">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
    <section class="project" id="proj4">
      <h2>Project Name</h2>
      <p1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti labore ea, laborum placeat odit? Architecto qui quae ad atque iure impedit reiciendis ab inventore, modi asperiores aspernatur porro officiis.</p1>
    </section>
  </section>
</main>