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 trialChristopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsMy 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
11,368 Points.main-header (line 72)
Appears to be missing the closing }
Scott Montgomery
23,242 PointsYou 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
4,318 PointsJust had the same problem but found the answer here straight away. Thanks all.
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsI have just tried to take a snapshot of the CSS, hope this link will lead to it this is my first time to use it: https://w.trhou.se/cghxfwcwvx
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 Pointswow, 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
11,368 PointsHappy to help! That snapshot is awesome!
Christopher Mlalazi
Front End Web Development Techdegree Graduate 17,305 PointsI 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
Front End Web Development Techdegree Graduate 17,305 PointsLol 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!