https://i.sstatic.net/BKHZV.png
I’m struggling to find a solution for the white line issue on the image. If anyone can explain why this is happening, I would greatly appreciate it. Despite my attempts, I have been unable to remove it even after inspecting the element and finding no border there. It’s quite frustrating. Below is the HTML code for this particular element (which is a flex item).
<div class="section-packages-flex">
<div class="section-packages-item">
<div class="section-packages-image">
<h3 class="package-heading"><span class="package-underline">Package 1</span> <br /><span class="orange">The Zebra</span></h3>
<img class="img-responsive" alt="Package 1 - The Zebra Package" src="_images/package-2.png">
</div>
<div class="section-packages-content">
<div class="section-package-content-full">
</div>
<div class="section-package-content-split">
</div>
<div class="section-package-content-split">
</div>
</div>
<div class="section-packages-pricing orange-background">
<h3>R 2500.00</h3>
</div>
</div>
Here is the CSS code.
.orange-background {
background: rgba(245,123,32,1.00);
background-color: rgba(245,123,32,1.00);
}
Parent Container:
.section-packages-flex {
display: flex;
display: -webkit-flex;
flex-flow: column wrap;
-webkit-flex-flow: column wrap;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.section-packages-item {
display: flex;
display: -webkit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.section-packages-pricing {
width: 20%;
color: rgba(255,255,255,1.00);
display: flex;
display: -webkit-flex;
flex-flow: column wrap;
-webkit-flex-flow: column wrap;
justify-content: center;
-webkit-justify-content: center;
text-align: center;
border-left: 1px solid rgba(88,88,88,0.00);
border-top: 1px solid rgba(88,88,88,1.00);
}