Trying to produce faded margins - html

Question

I am trying to produce a faded gradient for the left and right margins on my website, but the only way I can think to go about it is found on this fiddle: https://jsfiddle.net/btzr1vox/
body {
background-color: #fafafa;
}
.box-1 {
background-image: linear-gradient(to left, rgb(250, 250, 250) 0%, rgb(0, 0, 0, 1) 15%);
display: inline-block;
width: 50%;
}
.box-2 {
background-image: linear-gradient(to left, rgb(0, 0, 0) 85%, rgb(250, 250, 250, 1) 100%);
float: left;
width: 50%;
}
.row {
max-width: 114rem;
margin: 0 auto;
}
.col-1-of-2 {
width: calc((100% - #{6rem}) / 2);
}
.color {
color: white;
}
.column-1 {
margin-right: 3rem;
}
.column-2 {
margin-left: 3rem;
}
It works, but it divides the the page into to columns, which I don't want, as I would have to repeat the process for each section of the website. This seems like a hassle, especially if I want to change the width of the columns, such as a block that only takes up 1/3 of the page, and the other 2/3, and so on.

Answer 1

I would suggest separating the white gradient from the elements that hold your text, so they're not dependent on each other. Even easier: if you create two elements and apply the position: absolute; property on them, you can re-use them wherever you want: on top of the whole background, or per section.
If you run into problems with text covering the gradient, you can of course give the element that holds your text a padding equal to the width of the gradients, so they never touch them.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
body {
position: relative;
background-color: #36393f;
}
.gradient-left {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 100%;
background-image: linear-gradient(
to right,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
}
.gradient-right {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 100%;
background-image: linear-gradient(
to left,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
}
<div class="gradient-left"></div>
<div class="gradient-right"></div>