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 Foundations Selectors Class and ID Selectors

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

Class selectors

Hi guys and girls.

I'm having a bit of trouble with the code. When I refresh the browser, the paragraph text only runs into 1 or 2 words per line, and although the words "header" and "footer" are visible, the header and footer sections aren't, which is different to what shows on Guil's browser.

Here's my HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Classes and IDs</title>
    <link rel="stylesheet" href="css/css_foundations_style.css">
</head>
<body>
    <div class="container">
        <header>Header</header>
        <div>
            <h1>Class and ID Selectors</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis tristique magna.    Phasellus sapien mauris, aliquet quis ullamcorper nec, vestibulum eu tortor. Duis id venenatis augue. Suspendisse mauris eros, hendrerit vitae poseure nec, aliquet eget magna. Vivamus quis nunc non ipsum imperdiet pharetra id ac metus. Vestibulum aliquet eu velit in pulvinar. Donec feugiat quam leo, vel pulvinar quam pellentesque pretium.</p>
            <p>Vestibulum malesuada, orci id consectetur congue, justo augue porta lorem, at varius turpis mauris sit amet est. Ut vulputate dictum vestibulum. Integer at vestibulum lacus, venenatis auctor diam. Duis luctus, leo at ultrices placerat, est ante placerat leo, vitae tempor lorem augue a sem. Tiam vitae porta libero. Proin ac eros non lacus scelerisque elementum. Integer vulputate enim non eros tincidunt, sed laoreet sapien.</p>
            <p>Pellentesque posuere risus a purus auctor sagittis. Quisque lorem ligula, imperdiet vet faucibus vitae, mollis at leo. Proin ac commodo odio, sed tempor nibh. Nunc vel mauris in quam ultrices ornare. Aenean sagittis eget magna ut sodales.</p>
        </div>
        <footer>Footer</footer>
    </div>
</body>
</html>

And next is my CSS:

.container {
    width: 70px;
    margin: auto;
}

Am I doing something wrong here? Thanks in advance.

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sean,

I didn't review the video but you probably want width: 70%; You used 70px which would make the column really narrow.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Hi Jason. I've discovered my mistake, and what a stupid one it was. Guil typed: width: 740px; It's my fault for misreading his instructions. Thanks for your help and I'm sorry that happened.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Glad you got it sorted out. I should have reviewed the video rather than guess what it was.