My slider is not taking up the full width of my container. I've tried setting the CSS properties to 100% width and height, but it doesn't seem to work as expected (see image link below). The slider needs to occupy the entire width of the container (12 columns in lg size). https://i.sstatic.net/vLFvV.png
There is white space visible that needs to be filled.
Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech </title>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="css/basic-template.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <!-- Custom font -->
</head>
<body>
<!--Slider -->
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-12">
<div id="mojslider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#mojslider" data-slide-to="0" class="active"></li>
<li data-target="#mojslider" data-slide-to="1"></li>
<li data-target="#mojslider" data-slide-to="2"></li>
</ol>
<!-- Slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="Images/samsung.png" alt="samsungslide" />
<div class="carousel-caption">
<h1><font face="Roboto Condensed" size="15" color="white"> Samsung Galaxy S7 </font></h1>
</div>
</div>
<div class="item">
<img src="Images/iphone.png" alt="iphoneslide" />
<div class="carousel-caption">
<h1><font face="Roboto Condensed" size="15" color="white"> iPhone 7 </font></h1>
</div>
</div>
<div class="item">
<img src="Images/lg.png" alt="lgslide" />
<div class="carousel-caption">
<h1><font face="Roboto Condensed" size="15" color="white"> LG V10 </font></h1>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mojslider" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#mojslider" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row">
<div class="col-lg-12 bg-greenbackground">
<div class="col-lg-12 bg-greenbackground">
<center><font face="Roboto Condensed" size="6"> Mobtech - always with you! </font></center>
<p><font face="Roboto Condensed" size="4">
Lorem ipsum dolor sit amet, his no postulant liberavisse. At nibh lucilius sed. Omnium latine efficiendi ea vis. Elit facilisis mel et. Eu qui erat tation elaboraret. Ut nec tamquam vocibus urbanitas, euripidis contentiones usu ex, luptatum maiestatis mea cu.
Iriure accommodare vim et. Sed alia munere pertinax no. Duo eu sumo possim, nam te omnis offendit, no scaevola oportere his. Ut qui dolor scripserit reprehendunt. Ne sea zril vivendo, duo iudico aliquam laoreet eu, cu nullam essent delectus ius.
Pri facer accusam omittam eu, eam id dico prompta recusabo. Vix an suas alia putent, quo utinam deleniti legendos ne. Vis et nibh fugit aliquam. Ex est salutandi interesset, soluta ancillae incorrupte sea ne. Qui id velit dicunt interpretaris, ad option blandit nam. Odio mucius adversarium has at. Duo option intellegebat signiferumque ex, ut oblique detraxit sit.
</font></p>
</div>
</div>
</div>
</div>
<br/>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>