I deleted my index and can't get the sizing of pics or centering of page correct now. Please help!!

Question

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jenny Bowling | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Exo:400,200italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/Main2.css">

<style>

/* footer { color: green; } */ </style> </head>
<body>

<header>  
  <a href="indext.html" id="logo">
    <h1>Jenny Bowling</h1>
    <h2>Designer</h2>
  </a>
  <nav>
    <ul id=gallery>
      <li><a href="index.html">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>Playing with blending modes in Photoshop.</p>
      </a>
    </li>

    <li>
      <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>
    </li>

    <li>
      <a href="img/numbers-09.jpg">
      <img src="img/numbers-09.jpg" alt="">
      </a>
    </li>        
    <li>
      <a href="img/numbers-12.jpg">
      <img src="img/numbers-12.jpg" alt="">
      </a>
    </li>
  </ul>
</section>

</div>

<footer>
  <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"</a>
  <a href="http://facebook.com/nickrp"><img src="img/facebook-wrap.png" alt="Facebook Logo"</a>  
  <p>&copy; 2015 Jenny Bowling.</p>
</footer>

</body> </html>

My 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 30p 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-wight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5 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-type: none; /*removes bullet points from the list */
}

/*

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; } */

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

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/******************** Page: About ********************/

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

/******************** Page: Contact ********************/ .contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em;
}

.contact-info a { display: block; /* height: 20px:/ min-height: 20px; background-repeat: no-repeat; / width: 20px:*/ background-size: 20px 20px; padding; 0 0 0 30px; margin: 0 0 10px; }

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

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

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

/*************************** Color ***************************/

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

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

/* Nav background on mobile devices */ 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; }

Answer 1 · 2015-07-22T00:05:49Z

July 22, 2015 12:05am

Hi Jenny,

It looks like there are some syntax errors.

Have you tried running your code through the HTML and CSS Validators yet?

HTML Validator https://validator.w3.org/#validate_by_input

CSS Validator https://jigsaw.w3.org/css-validator/#validate_by_input

It also looks like you may be missing the html, head, and body tags.

Here's how you would add them:

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Jenny Bowling | Designer</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
      <link href='http://fonts.googleapis.com/css?family=Exo:400,200italic' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/Main2.css">
    </head>
    <body>
      <header>

Don't forget to close your tags.

There are also some typos in your CSS which is an easy fix.

Hope this helps get you back on track. These can be tricky, but keep it up!

Answer 2 · 2015-07-22T02:24:08Z

July 22, 2015 2:24am

Hi Jenny,

No problem at all. It looks like your stylesheet isn't linking due to a capital "M" in the file name for your CSS file in the link tag in your head section. Try this:

<link rel="stylesheet" href="css/main2.css">

As a best practice, I would name all of your files with lower case letters and with one word. If you are going to split into two words, separate them with a hyphen (i.e. travis-contact.html).

Best,

Answer 3 · 2015-07-21T23:47:35Z

July 21, 2015 11:47pm

Ok Josh, I did that adding this html <!DOCTYPE html>... to my index page. I can't get the pics to float, creating the 2 columns or get my headings and bullet points to center.

Answer 4 · 2015-07-21T23:54:46Z

July 21, 2015 11:54pm

Sorry Josh. I lied. Seems I don't know what a backtick is and use quotes instead.

Answer 5 · 2015-07-22T00:02:50Z

July 22, 2015 12:02am

Hi Jenny. How are you? It's good to see you here on TreeHouse forum.

To center the text you should try using

text-align: center;

css property. And to center all of the headings you have on the webpage, the correct css rule targeting all of them, should look somehitng like this:

h1,
h2
h3,
h4,
h5,
h6 {
    text-align: center;
}

Feel free to remove any of the heading tags (h4, h5, h6 - if you're not using those).

About the images, you can try the code:

ul#gallery > li {
    float: left;
    width: 45%;
    margin: 0 2.5%;
}

Do note, that width set by Nick could possibly be 46%, or perhaps all 50%; but, if you decide to change the width's property value, you should change the margin's property value aswell so that the second value of margin propertie timed by 4, combined together with width propertie value timed by 2 is equal to 100%.

Formula would look like this:

4 x margin + 2 x width = 100%

/*
Because the actual layout looks like this:

margin-left(img1) widthOfTheImage margin-right(img1) margin-left(img2) widthOfTheImage margin-right(img2)
*/

Hope that helps out. And don't forget, TreeHouse forums are a good place to ask the questions. Students and teachers, aswell as TTH staff are all here to help you on your journey of becoming a great Web Developer = ). Just don't give up!

Keep on practicing and you'll see the results of your hard work in no time. Best wishes in your future career

Answer 6 · 2015-07-22T00:54:45Z

July 22, 2015 12:54am

Thank you Ognjen and thank you Josh for the links. I had heard there was some kind of validator but didn't know what it was. I had the site working as it should going into the 8th video and lost my index page and had to rebuild without going all the way back through again. How frustrating!!! I'm not back to where I was yet but I'm getting there. Thank you both!

Answer 7 · 2015-07-22T01:42:59Z

July 22, 2015 1:42am

I fixed my errors that it showed I had but it still did not give me my 2 columns or center my headings. Index & css - https://teamtreehouse.com/workspaces/7431432#

Answer 8 · 2015-07-22T02:03:02Z

July 22, 2015 2:03am

Thanks for your patience Josh. It's obvious I'm new at this and I thank you very much for the tools you've shared. They will come in very handy. Here is my link to my code http://w.trhou.se/15f251wd8s

Welcome to the Treehouse Community

Looking to learn something new?

Jenny Bowling

Jenny Bowling

I deleted my index and can't get the sizing of pics or centering of page correct now. Please help!!

wrapper {

logo {

gallery li {

gallery li a p {

Josh Cummings

Josh Cummings

8 Answers

Josh Cummings

Josh Cummings

Josh Cummings

Josh Cummings

Jenny Bowling

Jenny Bowling

Jenny Bowling

Jenny Bowling

Josh Cummings

Josh Cummings

Jenny Bowling

Jenny Bowling

Ognjen Jevremovic

Ognjen Jevremovic

Ognjen Jevremovic

Ognjen Jevremovic

Jenny Bowling

Jenny Bowling

Jenny Bowling

Jenny Bowling

Josh Cummings

Josh Cummings

Jenny Bowling

Jenny Bowling