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

Posted by Mark Tatum
Mark Tatum
2,482 Points

Cannot get images into two columns.

My images are showing in one column. I will paste my HTML and CSS

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mark's Favorite Lexington Restaurants | Restaurant Reviews</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>Mark's Favorite Lexington Restaurants</h1>
        <h2>Restaurant Reviews</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/DSCN6310.JPG"> alt="">
          <img src="img/DSCN6310.JPG"> alt.JPG="">
          <p>Tlacotalpan.</p>
          </a></li>
          <li>
          <a href="img/DSCN6463.JPG"> alt="">
            <img src="img/DSCN6463.JPG"> alt.JPG="">
            <p>Parroquia de San Cristobol.</p>
            </a></li>
          <li>
          <a href="img/DSCN6472.JPG"> alt="">
            <img src="img/DSCN6472.JPG"> alt.JPG="">
            <p>Parque Zaragoza.</p>
            </a></li>
             <li>
          <a href="img/DSCN6486.JPG"> alt="">
            <img src="img/DSCN6486.JPG"> alt.JPG="">
            <p>Rio Papoloapn.</p>
            </a></li>
         </ul>
        </section>
      <footer>
        <a href="http://facebook.com/mark.tatum.737"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <a href="http://twitter.com/MWTatum"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <p>&copy; 2015 Mark Tatum.</p>
      </footer>
      </div>
  </body>
</html>

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

body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
  max-width: 940px;
  padding: 0 5%;
margin: 0 auto;  
}

a {
  text-decoration: none;
}

img {
max-width: 100%;
}

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

h1 {
  font-family: 'Changa One', sans-serif;
}
#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;
}

/*******************
Footer
*******************/

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

/*******************
Page: Portfolio
*******************/

#gallery {
margin: 0;
  padding: 0;
  list-style: none;
  }

#gallery li {
float: left;
width: 45%;
margin: 2.5%
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;
}

Any help appreciated!

1 Answer

morgan segura
morgan segura
Courses Plus Student 6,934 Points

use a CSS reset: http://cssreset.com/

Your browser is overriding your styles. add this to the top of your CSS file

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
Mark Tatum
Mark Tatum
2,482 Points

Thank you sir. Much appreciated!!!!! Wow, that was really quick!