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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Christene Delacruz
Christene Delacruz
428 Points
Posted by Christene Delacruz
Christene Delacruz
428 Points

I'm having trouble with my CSS

Here's my css stylesheet code, obviously I'm using my workspace as a notebook. I follow along the lessons but I also experiment on things on my own to see how the mockup would look like. So my mock up has an orange background, the div is supposed to have a green color. So I followed along the current lesson and wanted to tweak the gallery. At first the problem was the images are not reponding to my code margin: 2.5%; because there wasn't a space between images. I decided to try to determine what was causing it. So I cut the code for the div (container1) and saved it to see what would happen. I refreshed the mockup page and the images became bigger, but still no spaces between images. So I put the code for container1 back, saved it, and refreshed the page. The images are smaller in size again, still no spaces between images, but now the green background color for container1 is no longer there. 

body {
 background-color: orange; 
}

h1, h2 {
font-family: 'Allura', cursive;
}

a {
  text-decoration: none;
  font-family: Myriad Pro;
  color: #FFFFF0; /* this is the text decoration for the anchor element, which houses the links to files and websites, embedded in the code. */
}

img {
max-width: 100%;
}

#logo {
 text-align: center;
  margin: 0;
}

#container1 {
  max-width: 949px;
  margin: 0 auto;
  padding: 0 5%
  background: green;
}

header {
 background-color: #000000;
 border-color: #ffffff;
 margin: 0 auto;
 padding: 1%
}

nav a.selected, a:hover {
color: #888888;
}

p {
font-size: 1em;
font-weight: normal;
line-height: 1.2em;
margin-left: 2em;
margin-right: 2em;
margin-top: 2em;
margin-bottom: 2em;
}

footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
clear: both;
}

nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}

/* During the lesson, I intended to nudge the footer text to the center of the page but it wasn't doing that. I later found out that the footer text was enclosed in a paragraph tag and I initially set the paragraph tag to follow text-align: justify;  */


#gallery {
margin: 0;
padding: 0;
list-style: none;
}

#gallery li{
float: left;
width: 45%;
margin: 2.5%
background-color: #f5f5f5;
color: #bdc3c7;
}

7 Answers

Kieran Lake
Kieran Lake
7,450 Points
Kieran Lake
Kieran Lake
7,450 Points

You're missing a ; after padding: 0 5% in container1

Kieran Lake
Kieran Lake
7,450 Points
Kieran Lake
Kieran Lake
7,450 Points

Are the images in container1 too? Because if they are you should try:

container1 img { margin-right: 10px; }

Don't forget to add a . or a # before container1 depending whether it's a class or ID.

Kieran Lake
Kieran Lake
7,450 Points
Kieran Lake
Kieran Lake
7,450 Points

Ah ok I see you're trying to apply a margin of 2.5% on gallery li... You've forgot the ; again!

Christene Delacruz
Christene Delacruz
428 Points
Christene Delacruz
Christene Delacruz
428 Points

Thanks so much, Kieran! I don't understand why I kept forgetting the ;

Kieran Lake
Kieran Lake
7,450 Points
Kieran Lake
Kieran Lake
7,450 Points

No problem. If I've helped you please give the solution a +1.