Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Introduction to HTML and CSS Make It Beautiful With CSS Select and Style by Class

Rafael Cruz-Camacho
Rafael Cruz-Camacho
1,215 Points

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

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Jane Smith's Profile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head> <body>

<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>

</body> </html>

I can't figure out what I did wrong.

Rafael Cruz-Camacho, Good news! You didn't mess things. I found that you forgot to close your first div on the main.

<div class="card">. <!-- open div -->
    <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> 
<!-- ----- need closing div ----- -->
  <div class="card">  <!-- open div -->
    <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>   <!-- close div -->

2 Answers

Hope it helped! Your first divs on the main section was only showing up as one.

Rafael Cruz-Camacho
Rafael Cruz-Camacho
1,215 Points

Thank you so much for your help and fast response.