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 Layout Basics Positioning Page Content CSS Positioning Challenge

Posted by Alexisca hall
Alexisca hall
23,683 Points

Next, give .logo a top offset of -45px and a left offset of 125px.

Next, give .logo a top offset of -45px and a left offset of 125px.

style.css 
/* Complete the challenge by writing CSS below */
.logo
{
  position: absolute;
} 
.logo
top:-45px;
left:125px;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Positioning</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
        <div class="card">
            <img class="logo" src="city-logo.svg" alt="logo">
            <h2>Best City Guide</h2>
            <p>Cheesecake oat cake marshmallow. Bonbon pastry apple pie danish donut bonbon marshmallow caramels. Bear claw chocolate bar lemon drops. Carrot cake jelly beans jelly beans pie.</p>
        </div>
    </body>
</html>

4 Answers

Scott Laughead
Scott Laughead
12,750 Points
Scott Laughead
Scott Laughead
12,750 Points

You are declaring two instances of the .logo class in your CSS. Add the top and left attributes under position: absolute.

Simon Attfield
Simon Attfield
21,073 Points
Simon Attfield
Simon Attfield
21,073 Points

I looks like you're missing an opening curly bracket from your second rule. However they're both targeting the same class so you can put them together.

Steph Hamilton
Steph Hamilton
17,573 Points
Steph Hamilton
Steph Hamilton
17,573 Points

You don't need to add another .logo, you can put the rest within the curly braces of the first one. Also, as a side note, the second .logo is missing an opening curly brace.

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi,

Sorry for the delay in getting to your answer request...

I have had a look at the challenge and it seems you have a couple of slight errors in your code. As others have mentioned you don't need to use the .logo selector twice, you just simply add the next lines of code to the existing selector. You also have that missing curly brace if you were to use two declarations.

Check out the code below to help you get through the challenge:

/* Complete the challenge by writing CSS below */
.card {
  position: relative;
}

.logo {
  position: absolute;
  top: -45px;
  left: 125px;
}

Hope this helps :)

Craig