title: This code in CSS is stacking the background images on top of each other. Why?
body: <p>I am fairly new to CSS.<br>
  I am creating a grid of photos by using divs and classes, and they WOULD be a 3X3 grid of photos, but all the various photo shape aspects just stack on top of each other in the top left corner. It almost seems like the float property simply isnt working. See code.</p>
  
  <p>I basically stripped away everything i had been trying with object-fit and object position, because my overall goal was to take images of varying aspects, which i can object-fit and object-position fine as a single photo to adjust it to be a square photo panned to my liking. But now I am back to basics and testing an instructor's past example of making a 3 x 3 grid as shown in the code snippets, with the only alteration to his code being  using my own local photos.</p>
  
  <p>But there is no grid here. All the photos just stack on top of each other in the top left. I am not bothering to make them square yet, as i am just going back to creating a grid first.</p>
  
  <p>One possible difference, is that the instructors photos, who's images were all imported from outside URLs and were ALREADY square. Though i don't know why that would matter as he sets the height and width in the image class. Height is 300 px and width is 30%. I could see the different aspects disorienting the photos for now, but why would they be on top of each other if it includes a float property? Shouldn't they float left to the next photo?</p>
  
  <p>It should be a 3 by 3  responsive photo grid.</p>
  
  <p>Any help for the newbie is appreciated.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;efaround&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="someotherstyle.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="image image1"&gt;
  &lt;div class="image image2"&gt;
  &lt;div class="image image3"&gt;
  &lt;div class="image image4"&gt;
  &lt;div class="image image5"&gt;
  &lt;div class="image image6"&gt;
  &lt;div class="image image7"&gt;
  &lt;div class="image image8"&gt;
  &lt;div class="image image9"&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the CSS:</p>
  
  <pre><code>.image {
      height: 300px;
      width: 30%;
      float: left;
      margin: 1.66%;
      background-size: cover;
      background-position: center center;
  }
  
  .image1 {
  
      background-image: url("14258104_10210446960276194_6288188597623083310_o copy2.jpg");
  
  }
   .image2 {
  
      background-image: url("28279596_10212827002964259_2506063728175832972_n.jpg");
  
  }
  .image3 {
      background-image: url("sethsyes.jpg")
  }
  .image4 {
      background-image: url("sethstudio.jpg")
  }
  .image5 {
      background-image: url("sethsmonkey.jpg")
  }
  .image6 {
      background-image: url("turtles.jpg")
  }
  .image7 {
      background-image: url("turtles.jpg")
  }
  .image8 {
      background-image: url("turtles.jpg")
  }
  .image9 {
      background-image: url("turtles.jpg")
  }
  </code></pre>
  
  <p>i expect a 3 x 3 responsive photo grid.
  the output is all photos stacked on top of each other in the top left.
  (Float property not working? Because photos arent square? I dont understand)</p>