How to remove white margin from a carousel (Bootstrap)?

Question

How to remove white margin from a carousel (Bootstrap)?

I created a carousel on my site through Bootstrap code, and I want it to occupy the entire width of the screen (100vw) and almost the entire height (90vh); therefore, I put in the container width: 100vw and height: 90vh, but when I open the site the carousel gets something similar to a White margin (I tried to use margin:0px and padding:0px, but and this causes it to go beyond the screen limit (it gets a vertical scroll bar), plus the height attribute doesn't even work. How could I fix this?

My code: HTML:

<!DOCTYPE html>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid" id="topo">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/1.png" alt="1" class="carousel_img">
            </div>
            <div class="item">
                <img src="img/2.png" alt="2" class="carousel_img">
            </div>
            <div class="item">
                <img src="img/3.png" alt="3" class="carousel_img">
            </div>
        </div>
    </div>
</div>

CSS:

html, body {
margin: 0px;
}

body {
height: 400vh;
}

#topo {
width: 100vw;
height: 90vh;
}

.carousel_img {
width: 100%;
height: 100%;
}

1

html css carousel bootstrap-3

Author: Andrew, 2017-10-03

Source

1 answers

score 2 · Accepted Answer

The "White margin" is generated by the standard css rule of the class "container-fluid", which applies left and right padding of size 15px to the element containing that class.

To remove this margin, you can overwrite this rule from the container-fluid class by adding the css below:

.container-fluid { padding: 0 !important; }