Removing padding on columns makes horizontal scrollbar - html

Question

I wanted to remove the padding from the bootstrap grid column classes.
So I did
.col-x {
padding: 0;
}
But this is kind of breaking the whole layout because a horizontal scrollbar appears.
I've created a pen for this so you can see it.
What is causing the horizontal scrollbar and how to fix it?

Answer 1

The .row has minus margins on them. Also the .content-fluid has padding applied to them. So you just need to add this to your CSS:
.row {
margin:0;
}
.container-fluid {
padding:0;
}

Answer 2

You have .row elements nested in your columns. .row has a negative margin and always needs to be wrapped in a .container, which has padding that the negative margin offsets. The padding on your columns were doing that. I would just wrap all of your rows in .container-fluid
Rows are placed within a fixed or full-width Container (.container or .container-fluid, respectively) for proper alignment.
/* removing padding on columns makes horizontal scrollbar */
.column {
padding: 0;
}
.column {
min-height: 100vh;
border-right: 1px solid #ccc;
}
.column-header {
border-bottom: 1px solid #ddd;
}
.column.sidebar {
position: fixed;
top: 0; left: 0;
border-right: 1px solid #ccc;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-2 column sidebar">
fixed side
</div>
<div class="col-6 offset-2 column content">
<div class="column-header mb-5">
<div class="container-fluid">
<div class="row">
<div class="col-8 pt-4 pb-4 pl-5 pr-5">
Title
</div>
<div class="col-4 pt-4 pb-4 pl-5 pr-5 text-right">
Right
</div>
</div>
</div>
</div>
</div>
<div class="col-4 column content">
<div class="column-header mb-5">
<div class="container-fluid">
<div class="row">
<div class="col-8 pt-4 pb-4 pl-5 pr-5">
Title
</div>
<div class="col-4 pt-4 pb-4 pl-5 pr-5 text-right">
Right
</div>
</div>
</div>
</div>
</div>
</div>
</div>