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

Angela Smith
Angela Smith
763 Points
Posted by Angela Smith
Angela Smith
763 Points

Formatting not correct. 

<!DOCTYPE html>
<html>
<head>
    <title>Classes and IDs</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header class="main-header base">
            Header
        </header>
        <div id="main-content">
            <h1>Classes and ID Selectors</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique, orci et tincidunt fermentum, odio quam aliquam eros, tempus elementum enim elit eu libero. Suspendisse ut odio non augue bibendum tristique. Cras rutrum sollicitudin enim, in iaculis quam congue ut. Maecenas id leo non neque porttitor adipiscing vel in justo.
            </p>
            <p>
                Aenean eu turpis sed mauris fermentum tempus tristique non lacus. Maecenas volutpat sed dui in consectetur. Integer dui dolor, consectetur in mauris a, egestas fermentum orci. In hendrerit, tortor at eleifend rhoncus, odio arcu fringilla sapien, nec pretium elit turpis ut nunc. Phasellus in diam libero. Proin vel orci risus. 
            </p>
            <p>
                Duis bibendum tortor vel condimentum hendrerit. Phasellus tincidunt, augue non malesuada malesuada, tellus elit mattis orci, ut pretium orci felis vitae augue. Proin porta, mauris sed lobortis feugiat, leo augue pulvinar diam, eget gravida nibh elit et dui. 
            </p>
        </div>
        <footer class="main-footer base">
            Footer
        </footer>
    </div>
</body>
</html> ```

```css

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

.main-header {
    height: 110px;
    color: white;
    background: royalblue;
}

#main-content {
    padding: 20px;
    background: lightgray;
}

#main-content p {
    font-size: 21px;
    line-height: 1.5px;
    margin-top: 32px;
}

.main-footer {
    height: 100px;
    color: white;
    background: #222;
}

.base {
    padding-top: 50px;
    color: white;
    text-align: center;
    font-size: 24px;
} ```

file:///E:/Web%20Studies/Getting%20Started%20with%20CSS/selectors/class-and-ID/start/index.html This is what it looks like. All of the text is smooshed together.

1 Answer

Jacob Herper
Jacob Herper
91,103 Points
Jacob Herper
Jacob Herper
91,103 Points

The problem is your line-height in #main-content p, which is set to 1.5px. I suppose you meant to do 1.5em.

Angela Smith
Angela Smith
763 Points
Angela Smith
Angela Smith
763 Points

Haha oh my goodness thank you! Always the simplest of things!