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%
}

```
Another solution is to use `display: flex` in your `div` container:

**html**

**css**

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

```

[**fiddle**](http://jsfiddle.net/Loaz7gcu/24/)

**Ref**

> 
> The flex CSS property is a shorthand property specifying the ability
>  of a flex item to alter its dimensions to fill available space. Flex
>  items can be stretched to use available space proportional to their
>  flex grow factor or their flex shrink factor to prevent overflow.
> 
> 
>