Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Selectors Class Selectors

nakalkucing
nakalkucing
12,964 Points
Posted by nakalkucing
nakalkucing
12,964 Points

Having a little trouble with my second <div class="primary-content"> The red boarder won't show up. Help please!

I know that Guil changes the second <div class="primary-content"> to <div class="secondary-content"> while it is still 'primary' I can't get the red boarder to show up around my second div. Then when it is 'secondary' the grey line won't show up at the top. :( Any help would be appreciated. :)

Here's my HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body> 
    <header id="top">
      <span>Journey through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
    </header>
        <div class="primary-content">
            <p>
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a href="#">Find out more</a>
      <h2>Check out all the Wildlife</h2>
      <p>
        As spawning season approaches the fish acquire a humpback and protuberant jaw. After spawning they die and their carcasses provide a feast for gatherings of <a href="#">mink</a>, <a href="#">bears</a>, and <a href="#">Bald eagles</a>.
      </p>
            <a href="#">See the Wildlife</a>
        </div>

        <div class="primary-content">
      <h3>From Tents to Resorts</h3>
      <p>
        Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
      </p>
      <ul>
        <li><a href="#">Lake Tahoe Resort Hotel</a></li>
        <li><a href="#">South Lake Tahoe Resorts</a></li>
        <li><a href="#">Tahoe Ski Resort Lodging</a></li>
      </ul>         
      <h3>Pack Accordingly</h3>
      <p>
        One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
      </p>
      <ol>
        <li>Bring layers of clothing</li>
        <li>Pack sunscreen</li>
        <li>Carry extra water just in case</li>
        <li>Pack light</li>
      </ol>
        </div>

        <footer id="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

And here's my CSS code:

body {
  color: #878787;
  margin: 0;
}

header {
  background-color: orange;
}

h1 {
  font-size: 90px;
  color: white;
}

h2 {
  font-size: 53px;
}

h3 {
  font-size: 20px;
  color: #48525c;
}

.primary-content {
  border: 3px solid red;
}

#main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: solid 10px orange;
}

Thanks in advance. :)

2 Answers

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

When I try this code, I see red borders around both sections. Maybe there's something else in the environment influencing this. To allow a more thorough analysis, make a snapshot of your workspace and post the link to it here.

nakalkucing
nakalkucing
12,964 Points
nakalkucing
nakalkucing
12,964 Points

I tried to make a snapshot of my workspace, But the snapshot only came up blank. here's the snapshot Any suggestions?

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

This is the second question mentioning a blank snapshot today .. I wonder if there's a problem. You might try reporting the snapshot difficulty to the Support folks.

nakalkucing
nakalkucing
12,964 Points
nakalkucing
nakalkucing
12,964 Points

I contacted support yesterday and they said they were working on the blank snapshot. Today it appears to be working. The red line problem also seems to have been fixed as it is now showing up on my page. Thank you for your time. :)

Seokhyun Wie
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 Points
Seokhyun Wie
.a{fill-rule:evenodd;}techdegree seal-36
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 Points

Hi there, I just had the same issue (there was nothing wrong with my codings), but it was fixed when I opened up a new worksheet from the current page. I think it happens when you use the same worksheet that you used in a previous lesson. It can be solved by launching a new worksheet. Hope it is helpful!

nakalkucing
nakalkucing
12,964 Points
nakalkucing
nakalkucing
12,964 Points

Hi Seokhyun Wie! Thanks for your time and input.

Best, and Happy coding! :)