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!
It's not because the container-fluid but your row element has a margin-right of 15px.
just add
.row {
margin-right: 0px;
}
.row
{
margin-right: 0px;
}<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<a class="navbar-brand" href="#"><h5>Simmo Simpson Web Design</h5></a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home"><h5>Home</h5></a></li>
<li><a href="#about"><h5>About</h5></a></li>
<li><a href="#portfolio"><h5>Portfolio</h5></a></li>
<li><a href="#contact" ><h5>Contact</h5></a></li>
</ul>
</div>
</nav>
<div id="about" class="container-fluid">
<div class="row">
<div class="col-xs-5 custom-about">
<img class="img-responsive" id="my-face" src="http://res.cloudinary.com/simmosim/image/upload/v1488528687/Me_hkykum.jpg" class="img-circle" alt="My face">
</div>
<div class="col-xs-7 custom-about">
<h1>Simmo Simpson</h1><br>
<h2>Freelance Web Design & Photography<br>
Feel free to take a look at my work</h2><br>
<p>Need a website? Some quality photography?<br>I'm your man!<br>
</div>
</div>
<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>
</section>
<h3 id="contact">CONTACT ME</h3>
<div>
<br><p style="padding-left:5%" class="text-right">Drop me a line on your prefered social media<br> platform by clicking a link below.<br><br>
</p>
</div>
<div class="footer-social-icons">
<ul class="social-icons custom-social-icon">
<li><a href="https://www.facebook.com/simmophotography" target="_blank" class="social-icon"> <i class="fa fa-facebook custom-social-icon"></i></a></li>
<li><a href="https://twitter.com/TweetSimmo" target="_blank" class="social-icon"> <i class="fa fa-twitter custom-social-icon"></i></a></li>
<li><a href="https://www.linkedin.com/in/simpsonuk/" target="_blank" class="social-icon"> <i class="fa fa-linkedin custom-social-icon"></i></a></li>
<li><a href="https://www.instagram.com/simmosimpson/" target="_blank" class="social-icon"> <i class="fa fa-instagram custom-social-icon"></i></a></li>
<li><a href="https://nomadapprentice.wordpress.com/" target="_blank" class="social-icon"> <i class="fa fa-wordpress custom-social-icon"></i></a></li>
<li><a href="https://github.com/simmosim" target="_blank" class="social-icon"> <i class="fa fa-github"></i></a></li>
</ul>
<br>
</div>
</body>
</html>