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

Posted by Nechan Pashayan
Nechan Pashayan
2,927 Points

Grid, Font Style

Hello, this the first time using codePen, I did wtv I saw in the video "tips for asking questions" (so I'm not sure if I did this correctly). Here's the link: http://cdpn.io/Fxzqg. I'm having issues with Centering the site with the grid, & my other issue is using the "Nunito" font. I don't know what I'm doing wrong. Please help! (This is for creating a website structure & Styling section). Thanks

8 Answers

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

Hi Nechan,

For codepen, you almost have it right. There's a section for your html, your css, and your javascript. We won't have any javascript for now. You accidentally put your html file in the css section. That's why it's not showing up.

Just cut and paste that html file from the css section to the html section. Like this: http://codepen.io/GaryMann/pen/kdIEg

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

The images won't show up in codepen unless you link them to somewhere where the images are actually on the internet. I wouldn't worry about that for now.

Take a look at your html. Everything in your 

<body></body>

is wrapped in a container div

```<div class="container"></div>

 . This is good. ...
Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

In your css file, you could use that div with the class=container and use margin to center it.

.container {
    width: 1000px;
    margin: 0 auto;
}

That's going contain everything within a 1000pixel width. And it's going to apply no margin to the top and bottom of your div while applying an automatic margin to the left and right. This will center your div.

http://codepen.io/GaryMann/pen/CeFKA

Nechan Pashayan
Nechan Pashayan
2,927 Points
Nechan Pashayan
Nechan Pashayan
2,927 Points

Thanks for the fast response! I wrote the code in Sublime the same way that it was showing in the videos. Everything was working ok till now, it's just after I put the grid files in the program & launched the index.html in the browser I saw no difference. Maybe it's because I'm using Safari… I don't know.

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

No, you're on the right track. It's kind of a leap of faith using all this css while your in a basic html course. But without the css, the html is boring and there's no cool lay-out.

The lines of css I just posted are in the grid.css file already. If you have the grid.css file in sublime, can you copy and paste it into the codepen and see what happens?

Gary Mann
Gary Mann
8,639 Points
Gary Mann
Gary Mann
8,639 Points

It should look like this for now. Everything is just shifted to the center. http://codepen.io/GaryMann/pen/lGAIh

I have to go soon, so I'm going to guess what's wrong.

This line is in your head section of your html.

<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">

My guess is that you have to let the html file know where to find the css file by changing the href based on where you have the Smells Like Bakin' html and grid.css files saved on your computer. If they are saved in the same folder, then make it href="grid.css " .

Nechan Pashayan
Nechan Pashayan
2,927 Points
Nechan Pashayan
Nechan Pashayan
2,927 Points

In CodePen everything seems ok, like in the bottom part where the output is, on the browser however I don't see the page being centred. As for where the files are located I have a folder named "web" in which I have the index.html file & the grid.css file is in a folder named "css". I'm gonna try to put them in the same folder to see if that makes a difference. Thanks again!

Nechan Pashayan
Nechan Pashayan
2,927 Points
Nechan Pashayan
Nechan Pashayan
2,927 Points

In CodePen everything seems ok, like in the bottom part where the output is, on the browser however I don't see the page being centred. As for where the files are located I have a folder named "web" in which I have the index.html file & the grid.css file is in a folder named "css". I'm gonna try to put them in the same folder to see if that makes a difference. Thanks again!