我很惊讶他们还在大学里教你使用浮点数和绝对定位来居中东西，因为世界已经转移到了flexbox，你应该学习。绝对定位应该只在你想把东西重叠在彼此之上，而不是在div中居中的时候使用。这里有一些重新排列的代码让你开始。

@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.mainContainer {
  display: flex;
}

.boxRight {
  display: flex;
  flex-direction: column;

}

.headShotContainer {
  width: 300px;
  display: flex;
  align-items: center;

}

.profile-picture {
  float:left;
  width: 300px;
  height: 300px;
  border-radius: 0; /* Remove the rounded corners */
  object-fit: cover; Scale the image to fit within the dimensions
  margin: -100px auto 10px 10px;
  box-shadow: 0.5rem 0.5rem #e0fbfc, -0.5rem -0.5rem #03a9f4;
  filter: brightness(125%);
  
}

.content {

  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content h2 {
    
  font-size: 60px;
  position:absolute;
  top: 0; 
  left: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  text-align:center;
  width: 100%;
  
}

.contents h2{
    
  font-size: 60px;
  position:absolute;
  top: 3vh;
  left: 39%;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  text-align:center;
  transform: translateY(10px);
  
}

.contents h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
  
}

.contents h2:nth-child(2) {
  color: #03a9f4;
  animation: animate 4s ease-in-out infinite;
   
}

.content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
  
}

.content h2:nth-child(2) {
  color: #03a9f4;
  animation: animate 4s ease-in-out infinite;
  
  
}
.content h2:nth-child(3) {
  top: 25%;
  left: 0;
  color: transparent;
  -webkit-text-stroke: 2px #03a9f4;
  
}
.content h2:nth-child(4) {
  top: 25%;
  left: 0;
  color: #03a9f4;
  animation: animate 4s ease-in-out infinite;
  
}

p {
  font-family: Arial, Helvetica, sans-serif;
  color:#e0fbfc;
  font-size: x-large;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 400px;
}

@media (max-width:800px) {
  .mainContainer {
    flex-direction: column;
  }

  .headShotContainer {
    width: 100%;
    justify-content: center;
  }
}


body {

    text-align: center;
    background-image: url("images/38123.jpeg");
    background-size: cover;
    background-position: center;
    color: rgb(214, 63, 8);
  }
  
  
  
  main {
    align-items:center;
    margin-top: 150px;
    
    
  }
  
  
  h2 {
    font-size: 60px;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    color: transparent;
    -webkit-text-stroke: 2px #03a9f4;
  }
  @media only screen and (max-width: 600px) {
    h2 {
      position: relative;
      top: 20px;
      left: 10px;
    }
  }
  
  @keyframes animate {
    0%,
    100% {
      clip-path: polygon(
        0% 45%,
        16% 44%,
        33% 50%,
        54% 60%,
        70% 61%,
        84% 59%,
        100% 52%,
        100% 100%,
        0% 100%
      );
    }
  
    50% {
      clip-path: polygon(
        0% 60%,
        15% 65%,
        34% 66%,
        51% 62%,
        67% 50%,
        84% 45%,
        100% 46%,
        100% 100%,
        0% 100%
      );
    }
  }

  
  .project {
    display: inline-block;
    width: 500px;
    height: 500px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    font-family: 'Optima', sans-serif;
    color: #e0fbfc;
    font-size:x-large;
    text-decoration: none;
    
  }
  .project img {
    width: 100%;
    height: auto;
    --s: 100px;  /* size of the frame */
  --b: 2px;   /* border thickness */
  --w: 400px; /* width of the image */
  --c: #e0fbfc;
  
  width: var(--w);
  aspect-ratio: 1;
  object-fit: cover;
  padding: calc(2*var(--s));
  --_g: var(--c) var(--b),#0000 0 calc(100% - var(--b)),var(--c) 0;
  background:
    linear-gradient(      var(--_g)) 50%/100% var(--_i,100%) no-repeat,
    linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%) 100% no-repeat;
  outline: calc(var(--w)/2) solid #0009;
  outline-offset: calc(var(--w)/-2 - 2*var(--s));
  transition: .4s;
  cursor: pointer;
  }
  img:hover{
    outline: var(--b) solid var(--c);
  outline-offset: calc(var(--s)/-2);
  --_i: calc(100% - 2*var(--s));
  }



  .links {
    display: inline-block;
    width: 100px;
    height: auto;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
  }
  .links1 {
    display: inline-block;
    width: 90px;
    height: auto;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    
  }

  .links img {
    margin-top:50px;
    width: 100%;
    height: auto;
  }
  .links1 img {
    margin-top: 50px;
    width: 100%;
    height: auto;
    
  }
  
  nav {
    background-color: transparent; /* Transparent background */
    float: right; /* Float the navigation bar to the right */
    width: 100%;
    top: 0;
    right: 0;
    position: absolute;
  

  }
  
  nav ul {
    list-style-type: none; /* Remove the bullets */
    margin: 0; /* Remove the default margins */
    
    text-align: right; /* Right-align the text */
  }
  
  nav li {
    display: inline-block; /* Display the list items horizontally */
  }
  
  nav a {
    display: block; /* Make the links block-level elements */
    color: #e0fbfc; /* Black text color */
    text-align: right; /* Right-align the text */
    padding: 14px 16px; /* Add some padding */
    text-decoration: none; /* Remove the underline */
    margin: 0 30px 0 0; /* Add some space to the right of the links */
    font-size:large;
  }
  
  nav a:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Transparent black background on hover */
  }
  .resume {
    width: auto;
    height: 1000px;
    object-fit: cover;
    margin-top: 50px;
    box-shadow: 0 0 5px 5px #03a9f4;
  }
  .imaging {
    margin-top:15vh;
  }

<!DOCTYPE html>
<html>
<header>
  <script src="script.js"></script>
  <link rel="stylesheet" type="text/css" href="app.css">
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="resume.html">Resume</a></li>
      
    </ul>
  </nav>
</header>
<body>

  
 
<main>
  <div class="mainContainer">
    <div class="headShotContainer">
      <img src="images/Screen Shot 2022-11-21 at 12.28.48 AM.png" alt="Profile picture" class="profile-picture">
    </div>
   
    <div class="boxRight">
     
        <div class="content">
      
            <h2> Allen Tran </h2>
            <h2> Allen Tran </h2>
            <h2> Builder. Coder. Dreamer. </h2>
            <p>A USC student studying at the intersection of Computer Science and Entrepeneurship to come up with creative ideas using technology like AI and full-stack web development. </p>

        </div>
     
    
    </div>

  </div>
  
  
  
  
  <a href="https://www.linkedin.com/in/allenvtran/" class="links">
    <img src="images/ce093c7214ad357bb665cfd2f66a8b6b.png" alt="linkedin">
  </a>
   
  <a href="https://github.com/allenvtran" class="links1">
    <img src="images/github-mark-white.png" alt="Github">
    
  </a>
  </div>
  
</main>

</body>
</html>