completely lost

Question

in my workspace my code has no effect and in my code challenge I have changes when I change values. But I cant seem to figure what values to put to make it look good. The gray box is not the same sixe as my image and my images are way too big. Thank you so much for helping me.

css/main.css

a {
  text-decoration: none;
}

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

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

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: ‘Changa One’, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}
/***********************************************
FOOTER
***********************************************/
footer {
  font-size:: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}


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

Answer 1 · 2015-03-16T05:46:55Z

March 16, 2015 5:46am

got it! All or most of you list item tags "li" are revered. they are "il". I reversed with google crome dev tool and it made a big difference on your site! See if that fixes teh changes you were looking for!

Answer 2 · 2015-03-16T05:07:39Z

March 16, 2015 5:07am

One error in your code is there is an extra colon: in your css img styling

img {
  max-width:: 100%;
}

It should only have one, like this.

img {
  max-width: 100%;
}

Your border color also has a double colon:

go through your code and remove all the doubles!

Answer 3 · 2015-03-16T05:58:31Z

March 16, 2015 5:58am

Hey, no problem! If you're feeling frustrated don't worry, it gets easier as you go and you'll learn what to look for when you run into problems! We've all made errors like this and it get be really annoying when you're starting out, but don't let it discourage you. :)

Answer 4 · 2015-03-16T04:22:48Z

March 16, 2015 4:22am

In your workspace file is the css under a folder? If it is make sure the HTML matches up to import it in. Could you post your HTML as well? If your CSS is in a css folder the html would look similar to this. Make sure there are no caps or other differences in your folder/file names.

<link rel="stylesheet" type="text/css" href="css/main.css">

Answer 5 · 2015-03-16T04:34:43Z

March 16, 2015 4:34am

My full HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Olivier David | Designer</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>Olivier David</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">
      <il> 
        <a href="img/numbers-01.jpg">
        <img src="img/numbers-01.jpg" alt="">
        <p>Experimentation with color and texture.</p>
          </a>
        </il>
              <il> 
        <a href="img/numbers-02.jpg">
        <img src="img/numbers-02.jpg" alt="">
        <p>Playing with blending modes in Photoshop.</p>
          </a>
        </il>
        <il> 
        <a href="img/numbers-06.jpg">
        <img src="img/numbers-06.jpg" alt="">
        <p>Trying to create an 80's style of glows.</p>
          </a>
        </il>
        <il> 
        <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
        <p>Drips created using photoshop brushes.</p>
          </a>
        </il>
        <il> 
        <a href="img/numbers-12.jpg">
        <img src="img/numbers-12.jpg" alt="">
        <p>Creating shape using repetition.</p>
          </a>
        </il>
      </ul>
    </section>
    <footer>
      <a href="http://twitter.com"><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; 2015 Olivier David.</p>
    </footer>
      </div>
  </body>
</html>

css

/***********************************************
GENERAL
***********************************************/

body {
  font-family: 'Open Sans', sans-serif;
}
a {
  text-decoration:none
}

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

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

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


/***********************************************
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
***********************************************/
a {
    color: #6ab47b;
}

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

h1, h2 {
  color:  #fff;
}
nav {
  background:#599a68;
}

nav a, nav a:visited {
  color: #fff;
}
/*slected nav link*/
nav a.selected, nav a:hover {
 color: #32673f; 
}



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

And yes my Main.css is in my css folder.

Answer 6 · 2015-03-16T04:42:17Z

March 16, 2015 4:42am

No it doesnt.

Answer 7 · 2015-03-16T04:59:44Z

March 16, 2015 4:59am

And this is my website: http://port-80-6lge7fh6qu.treehouse-app.com/

Answer 8 · 2015-03-16T05:16:06Z

March 16, 2015 5:16am

Yes I just noticed I had a few double-colons. That's weird lol. Now it's removed. But my code still didn't change anything.

Answer 9 · 2015-03-16T05:55:49Z

March 16, 2015 5:55am

Whoa! Thanks alot my friend it changed everything. :)

Answer 10 · 2015-03-16T06:00:28Z

March 16, 2015 6:00am

Thanks, Just started yesterday. I had never written a line of code in my life before. It's a continuous puzzle and I love it!

Welcome to the Treehouse Community

Looking to learn something new?

olivier david

olivier david

completely lost

10 Answers

Sage Elliott

Sage Elliott

Sage Elliott

Sage Elliott

Sage Elliott

Sage Elliott

Sage Elliott

Sage Elliott

Sage Elliott

Sage Elliott

olivier david

olivier david

Sage Elliott

Sage Elliott

olivier david

olivier david

olivier david

olivier david

olivier david

olivier david

olivier david

olivier david

olivier david

olivier david

Sage Elliott

Sage Elliott