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 Polish the Navigation and Footer

Posted by Paul Coon
Paul Coon
1,497 Points

Image Gallery will not size and line up correctly.

Images are side by side but the 2.5% margin is not being recognized in my code. The second column of images is also not being sized correctly. Everything else seems to be formatted properly. My friend who is a programmer said my code is correct. I also compared it to the trainers code line by line and it appears to be exactly the same. My friend said it appears the program is not recognizing some of my css code even though it is correct. I am using Chrome Version 38.0.2125.111 m.

Here is my CSS code 

/*********************************************
GENERAL
*********************************************?

body {
   font-family: 'Open Sans', sans-serif;
{

#wrapper {
  max-width: 940px;
  margin: 0 auto; 
  padding: 0 5%;
 }

a {
  text-decoration: none;
}

img {
max-width: 100%;
}

/********************************************
HEADING
********************************************/


header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0;
  width: 100%;   
}


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

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/********************************************
Navigation
********************************************/

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

    nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

/********************************************
Footer
********************************************/

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

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}





/********************************************
Page: Portfolio
********************************************/
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}


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

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7
}


/*****************************************
COLORS
*****************************************/

/* Site Body */
body {
background-color: #fff;
  color: #999;
}

/* Green Header Color*/
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* Nav background on mobile*/
nav {
  background: #599a68;
}

/* Logo text*/
h1, h2 {
color: #fff;
}

/* Links is green*/
a {
  color: #6ab47b;
}

/* Nav link white*/
nav a, nav a:visited {
  color: #fff;
}

/* Selected nav link green*/
nav a.selected, nav a:hover {
  color: #32673f;
}

``` CSS code


I can't seem to copy my HTML code into this question?  I thought I would us ethe same format as for getting my CSS into this questions area.
Philip G
Philip G
14,600 Points

Can you please paste your HTML & CSS Code here: http://jsfiddle.net/ , save it and give us the link? Or paste your HTML Code. This would make it easier to help you :)

Paul Coon
Paul Coon
1,497 Points

Hi Phillip, Here is the js fiddle link I saved http://jsfiddle.net/kL6p269b/

It is odd becuase in this link everything appears to look ok as it should. however while using workspace within Treehouse it is not formatting correctly. Tell me if you think everything look ok.

Thanks,

3 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Hi Paul, I briefly took a look, and it looks like the top chunk of your code is commented out because of the *? part. If you change that to */, it should fix a few of the issues. Also, I noticed the closing CSS bracket for <body> should be flipped around the other way.

Philip G
Philip G
14,600 Points

Yeah, it seems that Dustin is right. You should try this.

Paul Coon
Paul Coon
1,497 Points
Paul Coon
Paul Coon
1,497 Points

Dustin- wow what a valuable lesson. I never even thought to look at the comments section to see if I did something wrong there. I made these changes and it works perfectly. It is a bit odd that workspace did not pick-up on the fact I had a bracket wrong. I went back and made the changes one at a time to see how it affected page.

Thanks so much!

Dustin Matlock
Dustin Matlock
33,856 Points

You're welcome :smiley:

Paul Coon
Paul Coon
1,497 Points
Paul Coon
Paul Coon
1,497 Points

Philip- thank you as well. I love this site