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: 
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.
> 
> 
>
you need to add this 

```
input{
   box-sizing:border-box;
}

```

because you have 100% + the border left and right for each element...so that's 100% + 6px;
border-box will make the border to be inside the div not outside of it

and also because of the whitespace between the elements you have to get dirty with the inputs

either add them on the same line or :

```
   <input><!--
--><input><!--
--><input>

```

by adding comments such as this