Question: this is my code: <http://jsfiddle.net/Loaz7gcu/>

I have three inputs which should fit on one line, equaling 100% but instead one sits on the next line. I have cleared all the margins and padding but still no luck. What am I doing wrong here?

My example CSS:

```
* {
    margin: 0;
    padding: 0
}
.one {
    width: 30%;
    margin-right: 10%
}
.two {
    width: 30%;
    margin-right: 10%
}
.three {
    width: 20%
}

```

Answer: 
You could do it by using `box-sizing: border-box;` and `display:inline-block;` to `input` and use `font-size:0px;` to `div` for remove the white-space and then set `font-size: 16px;` to input.

**JSFiddle - [DEMO](http://jsfiddle.net/Loaz7gcu/11/)**

**HTML:**

```
<div style="width: 100%; font-size:0px;">
    <input class="one">
    <input class="two">
    <input class="three">
</div>

```

**CSS:**

```
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input {
    display:inline-block;
    font-size:16px;
}
.one {
    width: 30%;
    margin-right: 10%
}
.two {
    width: 30%;
    margin-right: 10%
}
.three {
    width: 20%
}

```
There are two things you should take care about:

1. In inline flow, there's a [whitespace between inline level elements.](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements)
2. UAs apply a border to input elements by default which causes the total width exceeds `100%` of width of the container.

That being said, you could float the `input`s and give [`box-sizing: border-box`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) to achieve the goal:

**[Example Here](http://jsfiddle.net/hashem/Loaz7gcu/13/)**

```css
input {
    float: left;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

```

And don't forget to [clear the float](https://stackoverflow.com/questions/8564106/best-practice-for-css-clear-or-overflow) at the end of the container.