Container-fluid not full screen width

[admin]

My container-fluid element has a margin down the right side and a scroll bar at the bottom on all screen sizes. I don't want this.

This question has been asked before but non of the answers are working for me. Some previous posts also seem to not have helped some of the other OPs.

I've tried

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

section {
background-size: cover;
}

but they don't work.

Here's my html:

<section class="container-fluid" id="portfolio">

<h3 id="portfolio-title">PORTFOLIO</h3>
    <div>
        <div class="col-sm-4 col-xs-6 custom-column">
        <a href="http://codepen.io/SimmoSim/" target="_blank">
          <!--for image opacity --><div class="element">
            <img src="http://res.cloudinary.com/simmosim/image/upload/v1489655509/web-design_wlv0vi.jpg" alt="Web design" width="100%"></div></a><h4>Web Design</h4>
        </div>

        <div class="col-sm-4 col-xs-6 custom-column">
          <a href="https://simmosimpson.wordpress.com/portfolio/" target="_blank"><!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655007/bass-guitar-blue-dry-ice_ov3l6m.jpg" alt="My photograph" width="100%"></div></a>
         <h4>Photography</h4>
        </div>

        <div class="col-sm-4 col-xs-6 custom-column">
                <a href="https://nomadapprentice.wordpress.com/" target="_blank">
               <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655008/blog-desk_dewden.jpg" alt="My blog" width="100%"></div></a>
         <h4>Blog</h4>
        </div>


        <div class="col-sm-4 col-xs-6 custom-column">
        <a href="https://www.facebook.com/SimmoSimpsonMusic/" target="_blank">
          <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655006/Simmo-music_zb0yqg.jpg" alt="My music" width="100%"></div></a>
         <h4>Music</h4>
        </div>

        <div class="col-sm-4 col-xs-6 custom-column">
            <a href="https://www.facebook.com/effectivealtruismtaipei/" target="_blank">
              <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655004/Effective-Altruism-Logo_uove4m.jpg" alt="EA logo" width="100%"></div></a>
         <h4>Effective Altruism</h4>
        </div>

        <div class="col-sm-4 col-xs-6 custom-column">
                <!--for image opacity --><div class="element"><img src="http://res.cloudinary.com/simmosim/image/upload/v1489655008/TBC_fuzthv.jpg" alt="My future" width="100%"></div>
         <h4>TBC</h4>
        </div>
    </div>

...And my CSS:

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

section {
background-size: cover;
}

div {
text-align: center;
}

Help much appreciated!