i've copied and pasted the correct css and the images still wont align side by side? WHAT DO I DO!?

Question

Answer 1 · 2014-10-19T11:29:34Z

October 19, 2014 11:29am

I've just finished reviewing your code and I've found these mistakes : 1- comments go like this

/* Comment */

not like this

/Comment/

2- The hash sign (#) before the ids in CSS file is missing.

3- Some HTML attributes need to be closed for example:

class="social-icon

Needs to be like this

class="social-icon"

4- Also You have missed out several semicolons.

5- The main problem was that you forgot to put (:) in here

width: 45%;

it was like this

width 45%

so the full CSS code would be like this

/******************************************************* 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 0; width: 100% }

#logo {

text-align: center; margin: 0; }

h1{ 
    font-family: 'Oswald', 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; 
    margin: 
    text-align: center; 
}

.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 ********************************************************/

/*over nav link*/
nav a.selected, nav a:hover { color: #43563f}

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

header { background: #eba133; border-color: #500a68 }

nav { background: #888888; }

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

/*link color*/
 a { color: #EBA133; }

/*nav link*/

nav a, nav a:visited { 
    color: #eba133; 
    font-family: 'Roboto', sans-serif; 
    font-weight: normal; 
    line-height: 0.8em;
}

and the HTML code would be like this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Luke Eubank - Designer</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Sarpanch:400,800,600' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Luke</h1>
          <h2>Designer</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 colors and textures.</p>
          </a>
         </li>
         <li>
          <a href="img/numbers-02.jpg"> 
           <img src="img/numbers-02.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
          <li>
          <a href="img/numbers-06.jpg"> 
           <img src="img/numbers-06.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
          <li>
          <a href="img/numbers-09.jpg"> 
           <img src="img/numbers-09.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
            <li>
          <a href="img/numbers-12.jpg"> 
           <img src="img/numbers-12.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
         </ul>
      </section>
       <footer>
         <a href="http://twitter.com/lukeethere"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
         <a href="http://facebook.com/luke.ashton.eubank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>        

         <p>&copy; 2014 Luke Eubank</p>
      </footer>
    </div>
      </body>
      </html>

compare those codes with your codes and you will find what is missing.

Answer 2 · 2014-10-18T08:46:19Z

October 18, 2014 8:46am

As Gloria said, could you please give us your codes to review it so we can help you!

Answer 3 · 2014-10-18T09:44:11Z

October 18, 2014 9:44am

/*******************************************************
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 0;
  width: 100%
}

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

h1{
  font-family: 'Oswald', 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;
  margin:
  text-align: center;
    }

.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
********************************************************/

/*over nav link*/
nav a.selected, nav a:hover {
  color: #43563f}

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

header {
  background: #eba133;
  border-color: #500a68
  }

nav {
  background: #888888;
  }

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

/*link color*/
a {
  color: #EBA133;
  }

/*nav link*/

nav a, nav a:visited {
  color: #eba133;
  font-family: 'Roboto', sans-serif
  font-weight: normal;
  line-height: 0.8em

Answer 4 · 2014-10-18T10:16:40Z

October 18, 2014 10:16am

You have missed out several semicolons. Try adding them. One of them is in the image tag...for example change

img { max-width: 100% }

to

img { max-width: 100%; }

Ps. Your code is not appearing very well because it has no markdown. Try looking at the post I suggested in the other question of yours so that we can see your code better, because without it more errors appear.

Answer 5 · 2014-10-19T04:10:35Z

October 19, 2014 4:10am

1- I don't see HTML code! Please send us the right code.

2- As Gloria said, You have missed out several semicolons.

3- In the CSS code some classes need to be identified by using "." before using them in CSS for example:

Your code is like this:

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

The right code should be like this:

/* if this is a class use dot "." before the name of it */
.logo{text-align: center; margin: 0; }
/* if this is an id use hash "#" before the name of it */
#logo{text-align: center; margin: 0; }

Answer 6 · 2014-10-19T10:37:54Z

October 19, 2014 10:37am

  <head>
    <meta charset="utf-8">
    <title>Luke Eubank - Designer</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Sarpanch:400,800,600' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
        <a href="index.html" id="logo">
          <h1>Luke</h1>
          <h2>Designer</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 colors and textures.</p>
          </a>
         </li>
         <li>
          <a href="img/numbers-02.jpg"> 
           <img src="img/numbers-02.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
          <li>
          <a href="img/numbers-06.jpg"> 
           <img src="img/numbers-06.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
          <li>
          <a href="img/numbers-09.jpg"> 
           <img src="img/numbers-09.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
            <li>
          <a href="img/numbers-12.jpg"> 
           <img src="img/numbers-12.jpg" alt=""> 
            <p>Experimentation with colors and textures.</p>
          </a>
         </li>
         </ul>
      </section>
       <footer>
         <a href="http://twitter.com/lukeethere"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon></a>
         <a href="http://facebook.com/luke.ashton.eubank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon></a>        

         <p>&copy; 2014 Luke Eubank</p>
      </footer>
    </div>
      </body>
    </html> ```

Answer 7 · 2014-10-20T04:50:13Z

October 20, 2014 4:50am

more than helpful man! really appreciate it

Welcome to the Treehouse Community

Looking to learn something new?

Luke Eubank

Luke Eubank

i've copied and pasted the correct css and the images still wont align side by side? WHAT DO I DO!?

Gloria Dwomoh

Gloria Dwomoh

7 Answers

Mohamed A.Fouad

Mohamed A.Fouad

James Barnett

James Barnett

Mohamed A.Fouad

Mohamed A.Fouad

Mohamed A.Fouad

Mohamed A.Fouad

Luke Eubank

Luke Eubank

Gloria Dwomoh

Gloria Dwomoh

Mohamed A.Fouad

Mohamed A.Fouad

Luke Eubank

Luke Eubank

Luke Eubank

Luke Eubank