Picture gallery dividing into weird columns tried everything, help:/

Question

So i really am stuck.. Even though i have the same coding as him, i double checked it my photos still wont divide in to different columns, i will post all my css and html for main, responsive and index html and see if anyone can catch the mistake, i tried everything now..

Index html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Krinic Hype</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">
    <link rel="stylesheet" href="CSs/responsive.css">
  </head>
  <body>   
    <header>      
     <a href="index.html" id="LOGO">
  <h1>Nicolai Kristensen A/S</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> Experimenting with color and texture </p>
        </a>
    </li>
 <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p> Playing with blending</p>
        </a>
    </li>
       <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p> Trying to create an 80s style </p>
        </a>
    </li>
       <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p> Drips created using photoshop </p>
        </a>
    </li>   
       <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p> Creating shades </p>
        </a>
    </li>   
      </ul>
    </section>
    <footer>
      <a href="http://twitter.com/nickrp">
        <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit">
          <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2015 Krinic designing.</p>
    </footer>
   </div>
  </body>
</html>

Main.css

/**********************************
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%;
}

h3 {
  margin: 0 0 1em 0;
}



/**********************************
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: '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: 0 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}



/**********************************
PAGE: ABOUT
***********************************/

.PRO {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}



/**********************************
PAGE: CONTACT
***********************************/

.contactinfo {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contactinfo a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contactinfo li.phone a {
  background-image: url('../img/phone.png');
}

.contactinfo li.mail a {
  background-image: url('../img/mail.png');
}

.contactinfo li.twitter a {
  background-image: url('../img/twitter.png');
}



/**********************************
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;
}

Responsive CSS

@media screen and (min-width: 480px) {

  /**********************************
  TWO COLUMN LAYOUT
  ***********************************/

  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }



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

  #GALLERY li {
    width: 28.33333%;
  }

     #GALLERY li:nth-of-type(4n) {
    clear: left;
    }

    .PRO {
    float: left;
    margin: 0 5% 80px 0;
    }





}

@media screen and (min-width: 660px) {


     /**********************************
   Header
  ***********************************/
nav {
    background: none;
        float: right;
        font-size: 1.125em;
        margin-right: 5%;
        text-align: right;
        width: 45%
    }

    #LOGO {
    float: left; 
        margin-left: 5%; 
        text-align: left;
        width: 45%;

    }

    h1 {
    font-size: 2.5em;
    }

    h2 {
    font-size: 0.825em;
            margin-bottom: 20px;
    }


}

Heelp

Answer 1 · 2015-03-14T18:29:04Z

March 14, 2015 6:29pm

Hi nicolai,

I honestly can't tell what changes you made are intentional or not, which will make debugging this incredibly hard. For instance, you're linking to CSS files with a path using inconsistent case for the CSS directory - you have CSs. The HTML has inconsistent use of case where one id is named wrapper and another GALLERY.

My recommendation is to download the Project Files and use those to finish the course.

Answer 2 · 2015-03-14T23:58:57Z

March 14, 2015 11:58pm

i will, go do that, i just feel like if i never learn what my mistake is then i never get to be better anyway.. but yes i should just move on :) thanks for reply !

Welcome to the Treehouse Community

Looking to learn something new?

nicolai kristensen

nicolai kristensen

Picture gallery dividing into weird columns tried everything, help:/

2 Answers

Robert Richey

Robert Richey

nicolai kristensen

nicolai kristensen

Robert Richey

Robert Richey