HTML margins

[Krissu3212]

Hi, why does these div tags stretch their margins across the whole "main" div. The "main" div is inside "maincontainer" div that covers the whole page basically and the "main" div is 90% of it.

I don't want these margins because i want the pictures to be next to each other.

Here's also the CSS of those divs: (I'm sure there's a way to not repeat all this code but I needed to have them in different divs to position them differently on the website, which i haven't done yet)

#main {

    height: 100%;

    width: 90%;

    margin-left: 91px;

    

}

/* Main div is inside it */

#maincontainer {   

    /* Sets two background images */

    width: 100%;

    height: 2415px;

    background-image: url("images/city.jpg"), url("images/nature.jpg");

    background-position: top, bottom;

    background-size: 100% 50%;

    background-repeat: no-repeat, no-repeat;

}

 

 

.button_container1 {

    height: 180px;

    width: 200px;

    margin-top: 20px;

    border: 2px solid black;

    background-color: white;

    border-radius: 6px;

    /* margin-left: 972px; */

    

}

.button_container2 {

    height: 180px;

    width: 200px;

    margin-top: 20px;

    border: 2px solid black;

    background-color: white;

    border-radius: 6px;

    margin: 0;

}

.button_container3 {

    height: 180px;

    width: 200px;

    margin-top: 20px;

    border: 2px solid black;

    background-color: white;

    border-radius: 6px;

    margin: 0;

}

 

 

[ishan_shah]

You can use bootstrap container like 

<div class="row">
  <div class="col-3">
    your contain
  </div>
</div>