Backgrounds with 100% width

Hey all. I’m working on my random quote generator, and before I get into the JS or too deep into CSS, I wanted to clear up a problem I’ve also encountered with other projects. Here is the link to my pen:

https://codepen.io/kaydeejay/pen/baBerY

The problem is with the maroon background color behind my title. I want it to be 100% of the width, but I can’t seem to get it to fill in the tiny bit on either side, no matter how much I fiddle with margins in CSS. Is this a problem with the container-fluid class?

Thanks!

Hey I took a look at your code. This is happening because your container-fluid class has padding on it. It can be fixed by add this to your css file:

.container-fluid {
  padding: 0px;
}
2 Likes