Technical Documentation Page - Build a Technical Documentation Page

Tell us what’s happening:
I cannot figure out why this code isn’t working. This is the 4th grid on the page and the previous 3 work and are styled in exactly the same way. I’ve been looking at this segment for 2 days and can’t crack it.

Your code so far

<div class="section-div">
  <section id="Costa_Rica">
  <header>Costa Rica</header>
    <div class="grid-container-4">
      <div class="grid-item grid-item-4-1"><p><code>All trails seem to lead to waterfalls, misty crater lakes or jungle-fringed, deserted beaches. Explored by horseback, foot or kayak, Costa Rica is a tropical choose-your-own-adventure land." -Lonely Planet</code></p></div>
      <div class="grid-item grid-item-4-2"> <img src="https://www.caribjournal.com/wp-content/uploads/2021/12/costa-rica-glamping-cover-950x530.jpg"></div>
    <div class="grid-item grid-item-4-3">
      <p>Plans for this Trip</p>
        <ul>
          <li>International Sex!</li>
          <li>Ziplining</li>
          <li>Waterfall Tour</li>
          <li>Volcano Hike</li>
          <li>Shopping</li>
          <li>Food Tour</li>
        </ul>
        <div class="grid-item grid-item-4-4"><p></p></div>
    </div>
    <div class="grid-item-4-4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p></div>
    </div>
  </section>
</div>





My CSS:
/*Costa Rica*/
.grid-container-4 {
  display: grid;
  gap: 20px;
  grid-template-columns: auto;
  grid-template-rows: 3;
}

.grid-item-4-1 {
  grid-column: 1 / 8;
  grid-row: 1;
}

.grid-item-4-2 {
  grid-column: 4 / 8;
  grid-row: 2;
}

.grid-item-4-3 {
  align-self: center;
  justify-self: end;
  grid-column: 2 / 4;
  grid-row: 2;

.grid-item-4-4 {
  grid-column: 2 / 8;
  grid-row: 3;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Technical Documentation Page - Build a Technical Documentation Page

Link to the challenge:

what’s the issue with it? what do you expect? what’s happening instead?

I also think you are missing something here

I’m trying to make the html fall into the grid styling. Its is coming out as inline. I can’t figure out why that is. I closed the styling you found and it didn’t fix it!

You are my HERO! I left the preceding style element open and screwed it up!