Somehow I messed up the code. I was trying to center the title background, but instead, it centered both boxes.

<div class="main-nav">
    <ul class="nav">
      <li class="name">Jane Smith</li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Experience</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

<header>
  <img src="images/me.png" alt="Drawing of Jane Smith" class="profile-image">
  <h1 class="tag name">Hello, I'm Rafael.</h1>
  <p class="tag location">My home is Chiloquin, Oregon.</p>
</header>

<main class="flex">
  <div class="card">
    <h2 class="card-title">Background</h2>
    <ul>
    <li>I'm an aspiring web designer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs.</li>
      <li> I'm excited to bring my life experience to the process of building fantastic looking websites.</li>
      <li>Foutrth List Item!</li>
    <p>I've been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</p>
  </ul> 

  <div class="card">
    <h2>Goals</h2>
    <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
    <ul class="skills">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Ruby</li>
      <li>Rails</li>
    </ul>
    <p>I'd like to work for a web design firm helping clients create an impressive online presence.</p>
  </div> 

</main>
<footer>
  <ul>
    <li><a href="#" class="social twitter">Twitter</a></li>
    <li><a href="#" class="social linkedin">LinkedIn</a></li>
    <li><a href="#" class="social github">Github</a></li>
  </ul>
  <p class="copyright">Copyright 2022, Jane Smith</p>
</footer>