I know inline-block is a short term solution, but why is my result not the same?

Hi Thomas!

I just did some testing and the issue is as I suspected.

It's because the packing list has one more item than the "Tents to Resorts" list.

(The right column is one line taller.)

Looking for a solution now, though - and I'll follow-up when I have one.

I hope that helps.

Stay safe and happy coding!

Hi Thomas!

One easy/cheesy fix is to add a line break after the last list item in the first/left list.

Like this:

        <ul>
          <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
          <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
          <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
          <br /><!-- Add this -->
        </ul>

I'll try a few other things (a CSS/style solution), but that does work.

I hope that helps.

Stay safe and happy coding!

So far, because CSS is such a MESS (sometimes) and frustratingly hard to figure out (virtually impossible sometimes).

Good meme about it:

https://media0.giphy.com/media/yYSSBtDgbbRzq/giphy.gif

The HTML solution is the only way I could fix it, so far.

Yo Thomas,

The only way, so far, that I could fix it with CSS (but I still had to modify the HTML), was to add a "left" class to the first/left "column" div, and then add this below .class in the media query:

  .left {
    position: relative;
    top: -30px;
  }

Which to me is a clunky fix, at best, I actually think just adding the HTML break is the best fix.

Unfortunately, I have found that often I do have to add some weird, seemingly unnecessary CSS fixes to get certain web pages to look right. Sometimes I think CSS needs a complete overhaul. Sometimes it's mystifying and infuriating at the same time. Like, have you experience "collapsing margins" - they exist and to me are ROCK STUPID!?!

More on collapsing margins:

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

I hope that helps.

Stay safe and happy coding!

Hi I have the same doubt. My question to Peter is, by adding a line break won't it be a problem If more items are added in the future? Isn't there a way to align the columns at the top so they will expand longer at the bottom if necessary?

Edit: The line break, in my case, conflicts with screens under 1000px, they go back to be out of alignment, and the opposite happens If i remove the line break, meaning that under 1000px it is fine, above it jumps out of line.