Why am I getting red lines when I'm using Bootstrap - html

Question

I'm working on a small site for a startup
the site works well on desktops, but I'm trying to make it more responsive
using the Bootstrap grid system, however I'm getting red grid lines
What am I doing wrong?
Screenshot
HTML and CSS code below
<section class="tds-banner">
<div class="overlay">
<div class="description">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12">
<h1>Fishing Club Studios</h1>
</div>
</div>
<div class="row">
<div class="col--xs-12 col-sm-12">
<h5>We Make food and We drinks</h5>
</div>
</div>
<div class="row">
<div class="col-6">
Food
</div>
<div class="col-6">
Drinks
</div>
</div>
</div>
</div>
</section>
<style>
<!--CSS-->
#media only screen and (min-device-width: 300px) {
.tds-banner .overlay{
position: absolute;
min-height: 100%;
min-width: 100%;
left: 0;
top: 0;
background-image:url('/static /talking_drumstudios_logo_360.png');
background-attachment: fixed;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.description {
font-size: 20px;
border: none
}
}
</style>

Answer 1

When you find this kind of issues with borders using frameworks to override, inspect the element and try properties like:
border: none;
box-shadow: none;
outline: none;
About your text issues, I don't have access to your code but you probably have:
Reduce the padding on the container or margin on the divs, that's
why you have all this white space on top and left.
Or I see that you're using position absolute in some cases, try using to the minimum otherwise you'll have more work trying to do the responsiveness.

Answer 2

From your screenshot, it seems like you have assigned border to row or column class, try this CSS code:
.row,col-*{
border-width:0px;
}