Link causes double border - html

Question

Hez guys, I have some elements on page, which I've wrapped with border. The elements are close to each other so of course, on the place, where they touch each other, I've got double border.
Think is, I've made links from these elements, so now, some additional border is applyed and I don't know how to remove it.
Code below usefully removed double border when element's we're not links.
Can you please help me to remove this border which comes from link ?
Thank you}
HTML
<section class="popular-items clearfix">
<a href="detail.html">
<div class="item">
<img src="img/pink.png" alt="pink"><br>
<span>2015</span>
<h4 class="pink">pink</h4>
<p class="out-of-stock">Abc</p>
</div>
</a>
<a href="detail.html">
<div class="item">
<img src="img/white.png" alt="white"><br>
<h4 class="green">white</h4>
<p>5 €</p>
</div>
</a>
<a href="detail.html">
<div class="item">
<img src="img/pink.png" alt="pink"><br>
<h4 class="pink">Pink</h4>
<p class="coming-soon">Pink</p>
</div>
</a>
<a href="detail.html">
<div class="item">
<img src="img/red.png" alt="red"><br>
<h4 class="red">Red</h4>
<p>5 €</p>
</div>
</a>
</section>
SCSS
.popular-items {
width: 100%;
.item {
float: left;
width: 25%;
border: 1px solid #dddddd;
padding: 1%;
border-right-width: 0;
height: 420px;
&:last-child {
border-right-width: 1px;
}
&:hover + & {
border-left-width: 0;
}
&:hover {
border: 1px $dark solid;
}
}
}

Answer 1

Well i think you can fix that by setting the border of the links to 0px.
border : none;