I use a carousal from bootstrap and putted some content inside, I just have a problem with my arrows and the indicators at the bottom overlapping my content.
Maybe somebody can take a look at my code?
The fourth section you can see the problem better.
url to my project: http://75076.ict-lab.nl/Difv2/


Code:
<div class="section page4" style="background-color:red;">
				<div id="content-section4" class="content-parent">
					<div class="content1"> 
						<div id="carouselSection4" class="carousel slide" data-ride="carousel"> 
							<ol class="carousel-indicators">
								<li data-target="#carouselSection4" data-slide-to="0" class="active"></li>
								<li data-target="#carouselSection4" data-slide-to="1"></li>
								<li data-target="#carouselSection4" data-slide-to="2"></li>
								<li data-target="#carouselSection4" data-slide-to="3"></li>
							</ol>
					
							<div class="carousel-inner">
								<div class="carousel-item active">
								<div class="slider-container">
									<div class="slider-content">								
										<table style="height: 100%;" class="container-table">
											<tbody>
											<tr>										  
											<td class="align-middle">
												<div class="row">
													<div class="col-sm">
														<img class="mockups2" src="images/mockups2.png" alt="#">
													</div>
													<div class="col-sm">
														<strong><h2><i><?php echo getPageContent($conn, 6)['title']; ?></i></h2></strong>
														<div class="text4"><h3><?php echo getPageContent($conn, 6)['content']; ?></h3></div>
													</div>
												</div>
											</div>
											</td>										
											</tr>
											</tbody>
										</table>								
									</div>
								</div>
								</div>

								<div class="carousel-item">
								<div class="slider-container">
									<div class="slider-content">								
										<table style="height: 100%;" class="container-table">
											<tbody>
											<tr>										  
											<td class="align-middle">
											<div class="text-main">
												<img src="images/eatandweed.jpg">
											</div>
											</div>
											</td>										
											</tr>
											</tbody>
										</table>								
									</div>
								</div>
								</div>

								<div class="carousel-item">
								<div class="slider-container">
									<div class="slider-content">								
										<table style="height: 100%;" class="container-table">
											<tbody>
											<tr>										  
											<td class="align-middle">
											<div class="text-main">
												<img src="images/manandfrite.jpg">
											</div>
											</div>
											</td>										
											</tr>
											</tbody>
										</table>								
									</div>
								</div>
								</div>

								<div class="carousel-item">
								<div class="slider-container">
									<div class="slider-content">								
										<table style="height: 100%;" class="container-table">
											<tbody>
											<tr>										  
											<td class="align-middle">
											<div class="text-main">
												<img src="images/threeburgers.jpg">
											</div>
											</div>
											</td>										
											</tr>
											</tbody>
										</table>								
									</div>
								</div>
								</div>

							</div>

							<a class="carousel-control-prev" href="#carouselSection4" role="button" data-slide="prev">
								<span class="carousel-control-prev-icon" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="carousel-control-next" href="#carouselSection4" role="button" data-slide="next">
								<span class="carousel-control-next-icon" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>

						</div>
					</div>			
				</div>
			</div>