I am trying to display a four grid with different items for my web, however now all children divs have the same size:

<div class="container">
    <div class="grid4">
        <input type="submit" name="input1" value="input1"/>
    </div>
    <div class="grid4">
        <input type="submit" name="input2" value="input2"/>
    </div>
    <div class="grid4">
        <input type="submit" name="input3" value="input3"/>
    </div>
    <div class="grid4 no-border">
        <input type="submit" name="input4" value="input4"/>
    </div>
</div>

.container {
    width: 100%;
    margin: 30px 0 30px 0;
}

.grid4 {
    width: 25%;
    padding: 20px;
    border-right: 2px solid rgba(40,40,40,0.8);
    display: inline;
}

.no-border {
    border: none;
}

I tested it in jsfiddle and they indeed have the same size:

http://jsfiddle.net/ME7k8/

However, you can clearly see that the last chil div is smaller:

Why?! Any help?

edit In case it is too small in the image:

elemento {
}
.grid4 {
    width: 25%;
    padding: 20px;
    border-right: 2px solid rgba(40, 40, 40, 0.8);
    display: inline;
}
div {
    text-align: left;
}
body, div, td {
    font-family: 'Noto Sans',Arial,Helvetica,sans-serif;
    font-size: 12px;
    color: #666;
}
Inherited from body
body {
    text-align: center;
}

edit I checked again with the browser inspector and I can see that the first div is about 50% of the .container div. It has exactly the same css properties than the rest of the divs.

The 3 first divs are wider than the last due to:

1. They have the CSS display:inline (meaning their width gets effected by white-spaces, line breaks etc).

2. The last div has no border unlike the first 3.

Give them identical width

So what you need to do to make sure all 4 divs have the same width is removing all white-space between the submit buttons and their parent divs, and also add padding-right:22px; to the last div (if you want the 4 divs exactly identical wide).

jsFiddle demo.