I implemented the code below to create two columns, but there seems to be some space between them. How can I remove this space, considering that I am using "no-gutter"?
Check out the image here: https://ibb.co/80zTh60
<section id="incubator">
<div class="overlay">
<div class="row no-gutters">
<div class="col-xs-12 col-md-6 incu-color rebeccapurple">
</div>
<div class="col-xs-12 col-md-6 incu-img">
<img src="img/Facility/dedicated.jpg" alt="De">
</div>
</div>
</div>
</section>
#incubator{
padding: 0;
text-align: center;
margin: 0;
}
.incu-color{
height: 400px;
}
.incu-color.rebeccapurple{
background-color: rebeccapurple;
}
.incu-img img{
position: absolute;
display: block;
top: -100px;
right: 0;
height: 500px;
max-width: 100%;
}
.incu-text{
width: 100%;
padding: 10px;
background-color: darkorchid;
}