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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Paul Herrera
Paul Herrera
3,141 Points
Posted by Paul Herrera
Paul Herrera
3,141 Points

There is no margin between images & right image does not resize with the browser

There is no margin between images. Both images are next to each other, but while the left image resizes with the browser, the right image stays full size. Can someone review my code below?

'''

gallery {

margin: 0; padding: 0; list-style:none; }

gallery li {

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

4 Answers

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

Hmmmmmmm I assume you want the images to display inline, so you will want to set the parent #gallery li elements to display: inline-block;

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

You may also need to have a rule like #gallery li img { width: 100%;} . This will cause it to resize as the screen width reduces and parent li gets smaller.

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

You need a "." or a "#" selector before gallery, depending on whether it is a class or an id. For the first CSS rule you posted it looks like you may have used the letter o instead of the number 0. But I might be wrong about that and it is just a font where the 0s look like os to me.

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

Yeah it is the font and those are zeroes. Ignore the last part of my answer. You do need to distinguish whether gallery is a class or an id though.

Paul Herrera
Paul Herrera
3,141 Points
Paul Herrera
Paul Herrera
3,141 Points

Sorry i didn't paste it properly before. I am using a # as I have gallery as an id. main.css:

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

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

From index.html:

 <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="">
              <p>Drips created Photoshop brushes</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetitions</p>
            </a>
          </li>
        </ul>
Paul Herrera
Paul Herrera
3,141 Points
Paul Herrera
Paul Herrera
3,141 Points

Thanks, your last step fixed the issue. I am still confused, this was not mentioned in the video so I suspect I did something to not allow the image to use 100% of its parent's width