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

HTML Introduction to HTML and CSS (2016) Make It Beautiful With CSS Select and Style by Element

Posted by Joseph Starkie
Joseph Starkie
1,284 Points

unable to change color on <h3> a new subsection, please help

i have created the subsection without issue however when i go over to CSS and input the color instructions, nothing happens. i am unsure how to solve the issue as i believe i had copied every step so far.

Joseph Starkie
Joseph Starkie
1,284 Points

https://w.trhou.se/f3ex5fw0k9

Joseph Starkie
Joseph Starkie
1,284 Points

furthermore, my 'goals' section seems to have moved underneath my 'background' section.

2 Answers

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points
Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points

Hi Joseph,

There are styles at the bottom of the CSS style sheet like the .flex selector that are supposed to make the boxes display side by side when ever there is a screen width of a minimum of 720px (meida queries). But they aren't working in your code. The reason is higher up in the style sheet, you did not put the ending bracket on one of your selectors.

Your code:

.card {
  margin: 30px;
  padding: 20px 40px 40px;
  max-width: 500px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px; 
.card:hover {
  border-color: #ff99ff;
}

You didn't close the .card selector. Change your code to this:

.card {
  margin: 30px;
  padding: 20px 40px 40px;
  max-width: 500px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px; 
}
.card:hover {
  border-color: #ff99ff;
}

See how I closed the first selector right above the .card-hover selector?

Having the missing bracket was breaking all your styles after the missing bracket. That is why your <h3> when you had it at the bottom was not working.

If you make the change above, you should see the background and goals box side by side now because the flex box properties are making them display in a row.

I hope this helps.

Joseph Starkie
Joseph Starkie
1,284 Points

Thanks again, you've been very insightful and helpful.

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points
Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points

Hi Joseph,

I am not 100% sure why your h3 style is not working, but I moved it up under the body {} selector in the CSS and it worked. Being at the bottom of the stylesheet should still work as far as I know so I am not really sure why that fixed the problem. It might have something to do with the Treehouse workspaces that I don't 100% understand.

Your goals are located under the background section in the HTML file so if you want to move them you could cut and paste the goals section above the background section. Make sure you move the whole "card" div that surrounds the Goals.

Cut this div:

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

Paste it above this div:

<div class="card">
        <h2>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>I've been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</li>
          <li>Fourth list item.</li>
          </ul>
          <h3>A New Subsection</h3>
        </div>

Here is where I made the changes in the code to test if you want to look at it. https://w.trhou.se/zqq7ko98ch

Happy coding!

Joseph Starkie
Joseph Starkie
1,284 Points

Thank you this has helped immensely! regarding the goals/background boxes, i should have been clearer, i am looking to put the goals box next to the background box. apologies, i am very new to this and still figuring it out.

thanks