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) Enhancing the Design With CSS Transparent Gradients and Multiple Backgrounds

Christopher Mlalazi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points

My CSS has gone awry

Can someone help I have been trying to debug this for hours and I can't spot error (if it's a bug). I was diligently following along and copying all given code and everything was going fine until now when I checked my my Lake Tahoe website and discovered that several things have gone wrong, the span text is not centered and so too the paragraph below it. Also the inverted arrow below the main header has become huge. In 'Check Out Wildlife the image of the bear has disappeared. Then the two other images below the bear are no longer inline but are now block although my CSS says inline.

Maybe I made an error somewhere but I tried to compare with the CSS of the same from Treehouse and everything seems okay, until I refresh my Lake Tahoe page to see that the errors are still there. I also copy pasted the CSS from the tutorials into my CSS and everything went back to normal, but I would swear the codes are the same. Here is my code below:

/* Base Styles -------------------- */

  • { box-sizing: border-box; }

body { color: #878787; margin: 0; font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; text-shadow: 0 1px 1px rgba(0,0,0,.8); }

h2 { font-size: 3.3125em; /* 53px/16px / font-weight: normal; line-height: 1.1; margin: 0 0 .5em; / 0 0 26px */ }

h3 { font-size: 1.25em; /* 20px/16px / color: #48525c; line-height: 1.2; margin-bottom: 1.7em; / 34px */ }

img { max-width: 100%; margin-bottom: 20px; border-radius: 10px; }

ul, ol { margin: 30px 0; }

li { margin-bottom: 10px; }

/* Pseudo-classes ------------------ */

a:link { color: rgb(255, 169, 73); text-decoration: none; }

a:visited { color: lightblue; }

a:hover { color: rgba(255, 169, 73, .4); }

a:active { color: lightcoral; }

/* Main Styles --------------------- */

.main-header { padding-top: 170px; height: 850px;

background: linear-gradient(#ffa949, transparent 90%), #ffa949 url('../img/mountains.jpg') no-repeat center; background-size: cover;

.title { color: white; font-size: 1.625rem; /* 26px/16px */

}

.intro { font-size: 1.25em; /* 20px/16px */ line-height: 1.6;
}

.primary-content, .main-header, .main-footer { text-align: center; }

.primary-content { padding-top: 25px; padding-bottom: 95px; }

.secondary-content { padding-top: 80px; padding-bottom: 70px; border-bottom: 2px solid #dfe2e6; }

.callout { font-size: 1.25em; border-bottom: 3px solid; padding: 0 9px 3px; margin-top: 20px; display: inline-block; }

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

.t-border { border-top: 2px solid #dfe2e6; }

/* Layout Styles ------------------ */

.primary-content, .secondary-content { width: 75%; padding-left: 50px; padding-right: 50px; margin: auto; max-width: 960px; }

.wildlife { color: white; text-align: left; padding: 18% 24%; border-top: 10px solid #ffa949; margin: 105px 0 60px; background: #434a52 url('../img/bear.jpg') no-repeat center; background-size: cover; box-shadow: inset 0 0 50px 10px rgba(0,0,0, .8); border-radius: 10px; }

.arrow { width: 50px; }

/* Floated Columns ------------------ */

.resorts, .tips { width: 46.5%; }

.tips { float: left; }

.resorts { float: right; }

/* Float Clearfix ------------------ */

.group:after { content: ""; display: table; clear: both; }

8 Answers

Karolin Rafalski
Karolin Rafalski
11,368 Points

.main-header (line 72)

Appears to be missing the closing }

Scott Montgomery
Scott Montgomery
23,242 Points

You can also run your CSS through a validator to check for any errors. There are a lot out there but W3c is the most well kept https://validator.w3.org/

John Hasell
John Hasell
4,318 Points

Just had the same problem but found the answer here straight away. Thanks all.

Christopher Mlalazi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points

wow, thanks Karolin, I have spotted that. I don't know how I kept missing it - and which just goes to show that a coding community is special. It was like searching for a needle in a haystack. Now I can breathe.

Karolin Rafalski
Karolin Rafalski
11,368 Points

Happy to help! That snapshot is awesome!

Christopher Mlalazi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points

I tried to put it through a validator and it came out with several errors that I couldn't even figure out. I also put the tutorial CSS through the same validator and it too was caught with several errors.

Christopher Mlalazi
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Points

Lol six months ago I was still starting here at Treehouse, now I am wiser and a bit more knowledgeable, thanks to always checking up other folks code as it is another form of teaching yourself. Happy coding to all!