Removing border from first-child - css

Question

Is it possible to remove the first transparent border-left without increasing the height of the first box? I initially tried using margins, but this cannot work due to the use of percentages. Here is what I have - http://jsfiddle.net/KCbgM/1/
Update: The border that I am trying to remove is already transparent - the left border of the first box. I am trying to get the boxes to fit in the 100% with no gap before the first child - which at the moment is a transparent border using the '.grid ul li .grid-item' class.
HTML:
<div class="grid">
<ul>
<li>
<div class="grid-item grid-five">
<div class="grid-person-wrapper">
<img class="grid-person-mug" src="http://boardingarea.wpengine.netdna-cdn.com/deltapoints/files/2012/07/test.jpg">
</div>
</div>
</li>
<li>
<div class="grid-item grid-five">
<div class="grid-person-wrapper">
<img class="grid-person-mug" src="http://boardingarea.wpengine.netdna-cdn.com/deltapoints/files/2012/07/test.jpg">
</div>
</div>
</li>
<li>
<div class="grid-item grid-five">
<div class="grid-person-wrapper">
<img class="grid-person-mug" src="http://boardingarea.wpengine.netdna-cdn.com/deltapoints/files/2012/07/test.jpg">
</div>
</div>
</li>
<li>
<div class="grid-item grid-five">
<div class="grid-person-wrapper">
<img class="grid-person-mug" src="http://boardingarea.wpengine.netdna-cdn.com/deltapoints/files/2012/07/test.jpg">
</div>
</div>
</li>
<li>
<div class="grid-item grid-five">
<div class="grid-person-wrapper">
<img class="grid-person-mug" src="http://boardingarea.wpengine.netdna-cdn.com/deltapoints/files/2012/07/test.jpg">
</div>
</div>
</li>
</ul>
</div>
CSS:
.grid {
display: block;
float: left;
border:1px solid #000;
}
.grid ul {
list-style: none;
margin: 0;
padding: 0;
}
.grid ul li {
display: inline;
text-align: -webkit-match-parent;
}
.grid-five {
width: 20%;
}
.grid-item {
float: left;
display: block;
background: transparent;
position: relative;
overflow: hidden;
}
.grid ul li .grid-item {
border-left: 34px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid ul li:first-child .grid-item {
margin-left:0px;
}
.grid-person-wrapper {
border: 8px solid #cad7c5;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #fff;
float: left;
position: relative;
z-index: 1;
width: 100%;
cursor: pointer;
display: block;
-webkit-transition: All 0.1s ease;
-moz-transition: All 0.1s ease;
-o-transition: All 0.1s ease;
-ms-transition: All 0.1s ease;
transition: All 0.1s ease;
}
.grid-person-wrapper:hover {
border: 8px solid #a9f001;
opacity: 0.8;
}
.grid-person-mug {
width: 100%;
border: none;
max-width: 100%;
}

Answer 1

Remove the transparent borders, and instead set text-align:justify; on the list and use a pseudo element to stretch contents to 100% width:
FIDDLE
(Relevant) CSS
.grid ul {
list-style: none;
margin: 0;
padding: 0;
text-align:justify;
}
.grid ul:after {
content: '';
width: 100%;
display: inline-block;
}
.grid ul li {
display: inline;
}
.grid-five {
width: 18%;
}

Answer 2

You can try this...
Fiddle here..
.grid ul li:first-child .grid-person-wrapper
{
border-left:transparent;
}
If your requirement is different then let me know..
Good Luck...:)

Answer 3

You need to address the width change also. Try :
.grid ul li:first-child .grid-item {
border-left: none;
width: 15%;
}
Fiddle : http://jsfiddle.net/KCbgM/5/
Edit 1 :
How about changing the margin between the divs to account for the variation ?
.grid ul li .grid-item {
-moz-box-sizing: border-box;
border-left: 34px solid rgba(0, 0, 0, 0);
margin-left: 1.25%;
}
.grid ul li:first-child .grid-item {
border-left: medium none;
margin-left: 0;
width: 15%;
}
Fiddle : http://jsfiddle.net/KCbgM/6/
Let me know if this is what you want.

Answer 4

Try:
.grid ul li .grid-item {
padding-left: 34px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
EDITED:
Ok, now I see the issue.
This should solve the problem:
.grid ul li:first-child .grid-item {
margin-left:-34px;
}