CSS - Removing all widths from rows and columns with bootstrap

Question

I have a section on my site which has two rows of four columns with a block image and a heading across the image. I want to be able to dictate the margin-width between each column/image - basically it needs to be quite narrow. However there appears to be standard gutter widths for each column and I can't seem to remove them. I've tried using .no-gutter classes but they don't seem to be working. How do I remove all spacing between the columns/images so I can implement my own? Here's the code as it stands -

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: auto;
}

h1 {
  font-size: 3rem;
  font-weight: normal;
  color: #000;
  text-align: center;
  margin: 0;
  padding-bottom: 0px;
}

.container-fluid {
  width: auto;
  margin: 0px auto;
  /*  max-width: 80rem; */
}

.row .no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.col {
  /* width: calc(25% - 2rem); */
  /* margin: 1rem; */
  height: 300px;
  width: 300px;
  margin-bottom: 20px;
}

#whatwedo .col {
  position: relative;
}

#whatwedo h2 {
  position: absolute;
  top: 50%;
  left: 30%;
  margin: 0 20px 0 20px;
  color: white;
  text-align: center;
  transform: translate(-50%, -50%)
}

<section id="whatwedo">
  <div class="container-fluid">
    <h1>What we do</h1>
    <div class="container">
      <div class="row no-gutters">
        <div class="col">
          <h2>Brand Identity</h2>
          <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
        </div>
        <div class="col">
          <h2>Graphic Design</h2>
          <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
        </div>
        <div class="col">
          <h2>Editorial Design</h2>
          <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
        </div>
        <div class="col">
          <h2>Brand Guidelines</h2>
          <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
        </div>

      </div>
      <div class="row no-gutters">
        <div class="col">
          <h2>Print Management</h2>
          <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
        </div>
        <div class="col">
          <h2>Signage</h2>
          <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
        </div>
        <div class="col">
          <h2>Creative Direction</h2>
          <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
        </div>
        <div class="col">
          <h2>Illustration & Animation</h2>
          <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
        </div>

      </div>
    </div>
  </div>

</section>

It doesn't necessarily look very clear here but with bootstrap this is how the page looks -

I think the width gaps are also causing the columns inability to all stay aligned in one block and dropping down onto another row.

Answer 1

i change your class into "col-sm-3" instead of "col"

 <section id="whatwedo">
      <div class="container-fluid">
        <h1>What we do</h1>
        <div class="container">
          <div class="row no-gutters">
            <div class="col-sm-3">
              <h2>Brand Identity</h2>
              <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
            </div>
            <div class="col-sm-3">
              <h2>Graphic Design</h2>
              <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
            </div>
            <div class="col-sm-3">
              <h2>Editorial Design</h2>
              <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
            </div>
            <div class="col-sm-3">
              <h2>Brand Guidelines</h2>
              <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
            </div>

          </div>
          <div class="row no-gutters">
            <div class="col-sm-3">
              <h2>Print Management</h2>
              <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
            </div>
            <div class="col-sm-3">
              <h2>Signage</h2>
              <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
            </div>
            <div class="col-sm-3">
              <h2>Creative Direction</h2>
              <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
            </div>
            <div class="col-sm-3">
              <h2>Illustration & Animation</h2>
              <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;">
            </div>

          </div>
        </div>
      </div>

    </section>

Answer 2

try to put !important in your code

margin-right: 0!important;
margin-left: 0!important;

and what i know on bootstrap the gutter is padding not a margin. if still not try use this

padding-right: 0!important;
padding-left: 0!important;