Displaying images as inline

hm I can not access that page. It says that the page does not exist.

Could you share your Workspace as a zip? So I could look into it in my own workspace? To do this go to File > Download WorkSpace in your Workspace window.

Then upload that zip somewhere, where it can be downloaded easily.

Could you post a link to your WorkSpace with these images?

https://teamtreehouse.com/workspaces/6954702#

What is your e-mail? I can send it to you directly by WeTransfer? I dont know how to send it to your treehouse account :)

I've sent it. Vielen Dank für ihre Freundlichkeit!

Ah ok I see the mistake.

You added the class "image" to the div that wraps your gallery code.

However in your CSS you are trying to assign all rules to the div.img instead of div.image There is no .img class anywhere in your html document.

Also there is no need to set the display value of an img to inline. Because it IS an inline item by default.

You need to set the float: left; declaration to the image containing list items.

EDIT: And there are a few more issues in your code:

you did not set the CSS rule for your universal selector. Add

* {
  box-sizing: border-box;
} 

to the very top of your CSS.

Then delete all the div.img related rules. You already declared rules for the list items and #gallery at the bottom of your CSS. So you can basically delete you first gallery part in the CSS.

Then scroll to #wrapper you forgot the length unit in the margin. add px to 10

#wrapper {
    max-width: 940px;
    margin: 10 auto;  /* px is missing from the 10 here. it should be 10px  */
    padding: 0 5%;
    z-index:inherit;
}

next, in your CSS code scroll to this part and correct it:

#gallery li {
  float: left;
  width: 48%;
  margin: 2.5%; /* change this to 1% , because 48% multiplied with 2per row equals 96%. so you have 4% for margins. there are 4 marginspaces available. 2 to the left and right of each list item. this equals 1% per margin */
  background-color: #C8BBBB;
  color: grey;
  padding: inherit;
}

next: Your images are of inconsistent height. This causes your gallery line up to break. So every third gallery item needs to be cleared left. So add this to your gallery CSS:

#gallery li:nth-child(3n) {
          clear:left;
}

Hope this helped. Saskia

Thank you Saskia; this was really helpful!