CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Omar Gonzales
Omar Gonzales

Reputation: 4008

CSS: div extra margin not desired

I'm ussing Bootstrap4.

I have a row with 2 col-md-6 (these make up to 12 cols for the row).

However, my left col has an extra margin that I don't need/want. You can see it in the following image as the purple margin.

How can I get rid of it?

enter image description here

html:

<header class="my_header_bg_color">
  <br>
  <br>
  <div class="row margin_right_zero">
      <div class="col-md-6">
        <div class="my_custom_banner_left">
            <p class="my_title_banner">Stickers<br>personalizados</p>
            <p>Fáciles de ordenar por internet, diseño de conceptos gratis, envíos rápidos </p>
            <div class="row">
              <div class="col-md-6">
                  <a href="stickers" class="btn btn-azul text-white btn-block">Comprar</a>
              </div>
              <div class="col-md-6">
                  <a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras
                  </a>
              </div>
            </div>
        </div>
      </div>
      <div class="col-md-6 ml-auto">
        <img src="{% static 'img/banner-home2.png' %}">
      </div>
  </div>
</header>

Update 1:

Apparently it goes all the way down to the footer.

enter image description here

Upvotes: 0

Views: 101

Answers (1)

Krunx
Krunx

Reputation: 256

As far as I know, Bootstrap automatically sets left and right margin for row and container elements to -15px. Using simple CSS and setting left and right margin for those elements to 0 should fix your problem. If you want pure HTML (no CSS) solution I'm not aware that it exists.

Upvotes: 2

Related Questions