Estoy utilizando bootstrap para una página web, utilicé una grid con dos columnas para colocar un slider y un video de forma horizontal el cual quiero juntar, pero tengo un detalle entre slider y el video es tengo un espacio y quiero juntarlas
Este es mi codigo:
<!DOCTYPE>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<div class="row ">
<div class="col-sm-6" style="margin: 0px">
<!--carousel-->
<div class="header-content-right">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class=" d-block w-100" src="https://www.w3schools.com/w3images/lights.jpg" class="img-responsive" alt="prueba 1">
<!-- height="80%" width="80%"-->
<div class="carousel-caption d-none d-md-block">
<h5>prueba 1</h5>
<p>.</p>
</div>
</div>
<div class="carousel-item">
<img class=" d-block w-100" src="https://www.w3schools.com/w3images/lights.jpg" class=" img-responsive" alt="Second slide">
<!--height="80%" width="80%"-->
<div class="carousel-caption d-none d-md-block">
<h5>prueba 2</h5>
<p>.</p>
</div>
</div>
<div class="carousel-item">
<img class=" d-block w-100" src="https://www.w3schools.com/w3images/lights.jpg" class="img-responsive" alt="Third slide">
<!-- height="80%" width="80%"-->
<div class="carousel-caption d-none d-md-block">
<h5>prueba 3</h5>
<p>.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
</div>
</div>
</div>
<div class=" col-sm-6 ">
<!--VIDEO -->
<div id="video" class="header-content-right" style="margin:0px">
<div class="delimitador">
<div class="contenedor">
<iframe src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" controls="controls"></iframe>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>