Floating column problem

On my test site - http://dev.nerdysyntax.com/index.html -开发者_如何学Go I am trying to float three columns towards the bottom of this page under "what can I do for you." The columns seem to be having a padding or margin problem. No matter which width I change or the number I change the margin-right or padding-right, the third column seems to fall to the next line before it completely pushes right.

As you can see in on the page, there is a lot of space from the end of the third column to the end of my page width. Tried different things, but can't figure out the issue. Can anyone see the problem?

---

Try this :

.item {
    float: left;
    font-size: 18px;
    margin: 15px 0 0 48px;
    width: 30%;
}

.item:first-child {
    margin: 15px 0 0 0;
}

Edit

When you say breaks, I take it you mean last .item drops down a level. This is because your parent container has a fixed width, the children elements combined must not exceed it.

When floating : real width = width + padding + margin

---

try changing the .item property in your css:

.item {
float: left;
font-size: 18px;
margin: 15px 32px 0px 0;
width: 33%;
}

---

You mix pixels and percentages. Every ".item" element has right margin (32px) but you need right margin only for first and second element. When you give 5% for first and second right margin you have 90% for blocks. Try it:

.item{width:30%; margin-right:5%}
.item:last-child{margin-right:0}