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

Posted by Jae Kim
Jae Kim
597 Points

There is no space between the two columns of my pictures, that is, they are "stuck" next to one other.

The two pictures are stuck together. In other words, when I look at Nick's example, it is the case that the two pictures have some space between one another. However, mine does not. Also, the background color is not grey as well, as you can see under the picture. And when I shrink the page small enough, the words began to overlap. I hope that someone could answer my question and thank you.

4 Answers

Andrew Platt
Andrew Platt
2,036 Points
Andrew Platt
Andrew Platt
2,036 Points

in #gallery li your missing a semicolon next to your margin value, not sure what is going on but I would start there since that is incorrect syntax.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The missing semicolon there will cause the browser to ignore both the margin and the following background-color declaration. That would explain why you're not seeing either of those styles on the page.

Jae Kim
Jae Kim
597 Points

Thank you so much. I spent quite a while trying to compare my code with that of Nick's and I totally overlooked that detail. It was of great help :) Have a great rest of your day.

Andrew Platt
Andrew Platt
2,036 Points
Andrew Platt
Andrew Platt
2,036 Points

OK that makes sense Jason, thanks for clarifying that.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Can you paste your code so we might be able to help?

From your description, I'd to see that you've used the right declaration for colour and have applied margins to nicely separate the 2 images. :-)

Jae Kim
Jae Kim
597 Points

*Hi Jae, I changed your post for 3 backticks ` to format your code rather than commas' * Jonathan

/*********************************************
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%; /*fill the width of the parent container, if the container shrinks, the images will shrink*/
}



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

#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; 
}



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

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



/*********************************************
PAGE: PORTFOLIO
**********************************************/

#gallery {
  margin: 0;
  padding: 0;
  list-style: none; /*Removes all the bullet points, if there are any*/
}

#gallery li {
  float: left; 
  width: 45%; /*Will only take 45% of the width*/
  margin: 2.5%
  background-color: #f5f5f5;
  color: #bdc3c7; 
}


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

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

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

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

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

/* links */
a {
  color: #6ab47b;
}

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

/* selected nav link */
nav a.selected, nav a:hover {
 color: #32673f; 
}
Jae Kim
Jae Kim
597 Points
Jae Kim
Jae Kim
597 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jae Kim | Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Jae Kim</h1>
        <h2>Web Developer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Experimentaiton with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Trying to create an 80's style of glows</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/mrkimaa"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; Jae Kim 2014</p>
      </footer>
    </div>
  </body>
</html>
Jae Kim
Jae Kim
597 Points
Jae Kim
Jae Kim
597 Points

Sorry. I tried to make my main.css like the way that my html code came out but I could not figure out how to do it. I tried the ''' in the beginning and end, but it didn't work. Any suggestions as to how to make that work? And thank you for your consideration.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

The code looks sound to me. The margin is in gallery li and the background color declaration is in the correct format.

Have a look at the markdown cheat sheet at the bottom of this page, and you'll see some cool things you can add to your forum posts. :-)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Jae,

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

Hope this helps.