My floated elements are being pulled too far to the left

Question

I'm new to CSS, and I've looked for help in the previous forums on this issue. I think I'm doing everything right but my floated elements are being yanked to the left.

Here is my code:

div {
display: block;
}

.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}

.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
}

.third {
display: inline-block;
position: relative;
float: left;
height: 150px;
width: 150px;
border-radius: 25px;
}

.third img {
float: left;
position: relative;
}

And my html:

<div class="grid">
<article class="home">
  <article class="third">
<img src="" /></article>
</article>
    <article class="home">
  <article class="third">
  <img src="" /></article>
</article>
    <article class="home">
  <article class="third">
  <img src="" /></article>
</article>
</div>

Help please!

Answer 1

I can't comment yet…

Your original code on fiddle

The problem come from padding in .home class.
I have disabled padding:25px; here in .home class, because padding is added to width in CSS:

The modified version (without padding) on fiddle

Now it's not "pulled too far on the left".

What you can do instead, is to add margin:25px; to .third class, like this:

The modified version (with margin) on fiddle

EDIT: A CLEAN REVISITED VERSION:

The HTML code:

  <div class="grid">
    <article class="home">
      <div class="third">
        <img src="http://lorempicsum.com/nemo/350/200/1" />
      </div>
    </article>
    <article class="home">
      <div class="third">
        <img src="http://lorempicsum.com/futurama/350/200/6" />
      </div>
    </article>
    <article class="home">
      <div class="third">
        <img src="http://lorempicsum.com/up/350/200/6" />
      </div>
    </article>
  </div>

The CSS code:

.grid {
  width: 660px;
  position: relative;
  float: left;
  padding-bottom: 10px;
  clear: left;
}

.home {
  text-align: center;
  float: left;
  width: 33.3333333%;
}

.third {
  display:table-cell;
  height: 150px;
  width: 150px;
  padding: 25px;
  border-radius:25px;
  vertical-align:middle;
  background-color:#eee; //added just for test display
}

.third img {
  border:none;
  width: 100%;
  height: auto;
}

The result here on fiddle.

Images are adaptative, centered vertically and horizontally.
The .third class have a light grey background color just for testing and displaying the curved borders and the centered images inside it.
I have also replaced in html code, the second <article> tag by a <div> tag, because it is redundant.