How to remove space between Bootstrap rows

Question

For some reason I have a gap between my two bootstrap rows, I think it may be relating to bootstrap padding somewhere but I couldn't find anything that might be pushing the second row lower. Here's a of what's happening. I want the image in the second row to be pushed up so it's beneath the first row (the row highlighted in the image). Any help is appreciated!

/*style sheet*/


#Backg
{
background-image: url("Graphics/ravenna.png");
background-repeat: repeat;
height: 100%;
}



#PrimaryC {
padding: 10px;
background-image: url("Graphics/paper_fibers.png");
background-repeat: repeat;
height: 100%;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}

#Header
{
height: 100px;
width: 100%;
background-image: url("Graphics/SiteLogo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}  


.caption a
{
text-decoration: none;
color: black;
}

.caption a:hover
{
text-decoration: none;
color: black;

}

.caption a:visited
{
text-decoration: none;
color: black;

}

.caption a:active
{
text-decoration: none;
color: black;

}

.form-group
{
padding: 10px;
}




.Content 
{
width: 100%;
height: 500px;
background-color: white;
resize: both;
border-radius: 0px 25px 25px 25px;
border: 1px solid white;

}

#HeaderText /
{
font-family:'Rokkitt', serif;
font-size: 35px;
color: black;
text-decoration: underline;
padding-right: 20px;
}

#RegularText 
{


font-family:'Rokkitt', serif;
font-size: 18px;
padding-right: 20px;
}

.dropcap
{ 
float: left;
color: #903;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia; 
}


#Arcade 
{
width: 100%;

}

.post-content
{
font-family:'Didact Gothic', sans-serif;
font-size: 150%; 
top: 120px;
left:15px;
position: relative;
letter-spacing: 2px;

}

#RightRow
{
Position: relative;

}


.top-buffer 
{ margin-top:20px; 
}


.centerBlock
{
position: relative;
top: -200px;
padding-left: 10px;
margin:0 auto;
}



.Slot
{
display: inline-block;
margin-left: 10px;
right: 5px;
}



#slideshow
{
margin:auto;
}


.col-md-12 
{
position: relative;

}


.bigicon  
{
font-size: 35px;
color: #4D7549;
padding: 10px;
}

.header
{
font-family:'Rokkitt', serif;
font-size: 35px;
text-decoration: underline;

}


.footer-basic-centered
{
background-color: #683025;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
box-sizing: border-box;
width: 100%;
text-align: center;
font: normal 18px sans-serif;
box-shadow: 0 5px 5px -5px black;
padding: 15px;
margin-top: 25px;
}

.footer-basic-centered .footer-company-motto
{
color:  white;
font-size: 24px;
margin: 0;
font-family:'Rokkitt', serif; 
}

.footer-basic-centered .footer-company-name
{
color:  #8f9296;
font-size: 14px;
margin: 0;
}

.footer-basic-centered .footer-links
{
list-style: none;
font-weight: bold;
color:  #ffffff;
padding: 35px 0 23px;
margin: 0;
font-family: 'Didact Gothic', sans-serif;
}

.footer-basic-centered .footer-links a
{
display:inline-block;
text-decoration: none;
color: inherit;
}



@media (max-width: 600px) {

	.footer-basic-centered{
		padding: 35px;
	}

	.footer-basic-centered .footer-company-motto{
		font-size: 18px;
	}

	.footer-basic-centered .footer-company-name{
		font-size: 12px;
	}

	.footer-basic-centered .footer-links{
		font-size: 14px;
		padding: 25px 0 20px;
	}

	.footer-basic-centered .footer-links a{
		line-height: 1.8;
	}
}



thead 
{
 display:block;
 margin:0px;
 cell-spacing:0px;
 left:0px;
}

tbody 
{ display:block;
 overflow:auto;
 height:300px; 
}

 th
 { height:50px;
 width:100%;
}


td 
{ height:30px;
 width:100%;
 margin:0px;
 cell-spacing:0px;
}



/*Desktop*/
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 22px;
position: relative;
top: -360px;
}



/*Tablet Devices*/
@media (min-width: 768px) and (max-width: 969px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
top: -270px;
font-size: 50%;


}
}
/*Mobile Devices*/
@media(max-width: 767px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
font-size: 20%;
top: auto;
} 
.post-content
{
top: 20px;
font-size: 80px;
}
.Content
{
height: 600px;
}
}

/*1200*/
@media (min-width: 970px) and (max-width: 1119px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 25px;
position: relative;
top: -310px;
font-size: 60%;
}}
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
   
    <link rel="stylesheet" href="Styles.css" /> 		<!--Main Style Sheet-->
    <link rel="stylesheet" href="bootstrap.min.css" />  <!--Bootstrap Style Sheet-->
	<link rel="stylesheet" href="animate.css" />		<!--Animate Style Sheet-->
	<link rel="stylesheet" href="hover.css" />			<!--Hover animation Style Sheet-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">	<!--Font Awesome Style Sheet-->

    <link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css' />			<!--Rokkitt Google Font-->
    <link href='https://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css' />		<!--Gothic Google Font-->

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>			<!--BootStrap JS-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>					<!--JQuery JS-->
	<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>					<!--JQuery Cycle Plug-in-->
		
	<!--Image Fade Script-->
	<script type="text/javascript"> 
	$(document).ready(function() {
		$('.Slot').cycle({
			fx: 'fade' 
		});
	});
	</script>
	<title>Retro Games Arcade</title>
  </head>
  
  <body>
    <div id="Backg">
      <div id="PrimaryC" class="container">   																	<!--Primary Container-->
        <div id="Header">					  																	<!--Site Logo-->
        </div>
        <div class="Content">				 																	<!--Main Content Container-->
          <div class="row">																						<!--Row 1-->
            <div class="col-sm-6">																				<!--Left Col-->             
              <img src="Graphics/Arcade.png" id="Arcade" class="hidden-xs" />
              <div class="caption post-content">
                <div id="Home"><a href="Home.htm" class="hvr-push">home</a></div>								<!--Home Button-->                
                <div id="Stock"><a href="Stock.htm" class="hvr-push">stock</a></div>							<!--Stock Button-->               
                <div id="AboutUs"><a href="AboutUs.htm" class="hvr-push">about us</a></div>						<!--About Us Button-->                
                <div id="ContactUs"><a href="ContactUs.htm" class="hvr-push" >contact us</a></div>				<!--Contact Us Button-->               
              </div>
			  
			  
			  <div id="slideshow" class="centerBlock hidden-xs hidden-sm hidden-md">			  				<!--Image Slide Show-->
				  <div class="Slot">
				  <img class="img-responsive" src="Graphics/IMG1.png" width="158" height="162">
				  <img class="img-responsive" src="Graphics/L1.png" width="158" height="162">
				  </div>
				  
				  <div class="Slot">
				  <img class="img-responsive" src="Graphics/IMG2.png" width="158" height="162">
				  <img class="img-responsive" src="Graphics/L2.png" width="158" height="162">
				  </div>
				  
				  <div class="Slot">
				  <img class="img-responsive" src="Graphics/IMG3.png" width="158" height="162">
				  <img class="img-responsive" src="Graphics/L3.png" width="158" height="162">
				  </div>
				</div>			  			 
			</div>
			
            <div class="col-sm-6 form-group" id="RightRow">  																	<!--Form-->
				<legend class="text-center header">Contact us</legend>
				     <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
							<div class="col-md-8">
								<input id="fname" name="name" type="text" placeholder="First Name" class="form-control">		<!--First Name Field-->
							</div>	
					</div>
			
		             <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>			<!--Last Name Field-->
                            <div class="col-md-8">
                                <input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
                            </div>
                     </div>

                     <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>		<!--Email Address Field-->
                            <div class="col-md-8">
                                <input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
                            </div>
                     </div>

                     <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>	<!--Phone Number Field-->
                            <div class="col-md-8">
                                <input id="phone" name="phone" type="text" placeholder="Phone Number" class="form-control">
                            </div>
                     </div>

                     <div class="form-group">
                         <span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>	<!--Message Field-->
                            <div class="col-md-8">
                                <textarea class="form-control" id="message" name="message" placeholder="Enter your message here and a member of our team will respond as quickly as possible." rows="7"></textarea>
                            </div>
                     </div>

                     <div class="form-group">
                         <div class="col-md-12 text-center">
							</br>
                                <button type="submit" class="btn btn-primary btn-lg">Submit</button>								<!--Submit Button-->
                         </div>
                     </div>
			</div>
		</div>
						
						
		<div class="row" id="stuff">																								<!--Row 3-->
          <div class="col-md-12">
            <img src="Graphics/Aracde3.png" id="Vector" class="img-responsive center-block" class="hidden-xs" />
          </div>      	 
		</div>		  
		</div>
	</div>
	<footer class="footer-basic-centered">
		<p class="footer-company-motto">Expand Your Retro Playground.</p>
        <p class="footer-links">
        <a href="Home.htm">Home</a> · 
        <a href="Stock.htm">Stock</a> · 
        <a href="AboutUs.htm">About Us</a> · 
        <a href="ContactUs.htm">Contact Us</a></p>
        <p class="footer-company-name">Retro Games Arcade &copy; 2016</p>
    </footer>
	
  </body>

Answer 1

getbootstrap.com: How To Do Line Spacing in Bootstrap

If you want to use bootstrap to control line spacing it is recommended to use the margin and padding settings in bootstrap. i.e. my-0 and py-0.

m is for margin

p is for padding

y is for top and bottom

0 is the amount of spacing

Answer 2

If you are still having a problem, I believe it has something to do with your .Backg or .PrimaryC class.

They both have a "height" property set to 100%.

Have you tried removing/changing this height property? It seems your ".Content" div is the correct height, but the parent containers are bigger.

Answer 3

As mentioned, make sure that the row doesnt have a margin on the bottom, you can specifically remove it with:

.class {
margin-bottom: 0;
}

And also see if the second row has margin on top, or paddings. All of those will leave "room" between the rows.

Answer 4

Bootstrap"s .row class has margin, see the source code here

So probably you have to override with margin: 0px or create a helper class like

.no-margin
{
  margin: 0px !important;
}