Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Foundations Selectors Class and ID Selectors

Sean Flanagan
Sean Flanagan
33,232 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

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,232 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.

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