I believe I have a solution for you.
To start, I will share some code that is functional and then elaborate on the reasoning behind its functionality:
HTML
<body>
<div class='block'>
<div class='block2'>
Hello World
</div>
</div>
</body>
CSS
* {
padding: 0;
margin: 0;
}
body {
background: grey;
}
.block {
color: white;
text-align: center;
font-size: 3em;
margin: auto;
margin-top: 50px;
height: 100px;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,.01), rgba(0,0,0,.2) 20%,
rgba(0,0,0,.4) 50%, rgba(0,0,0,.2) 80%, rgba(0,0,0,.01) 100%);
}
.block2 {
height: 100px;
width: 400px;
margin: auto;
}
Allow me to explain further! :)
Looking at your HTML first, by enclosing the "Hello World" text within a div, any background styling applied would be contained within that specific box.
If the objective is to have the gradient without side borders, extend the container (the div) to occupy the full width of the page. You can maintain the text in its independent container with no background color setting, resulting in transparency.
In the provided HTML, a new div named "block2" was introduced nested within the original "block" class div to contain the text.
Now shifting focus to the CSS modifications made:
There were three straightforward changes implemented, outlined below:
Change 1 - The initial lines of code now include:
* {
margin: 0;
padding: 0;
}
This ensures there are no unwanted spaces at the edges of various screens, providing a consistent layout across different browsers by resetting default values.
Change 2 - A line added to the existing CSS rules states:
.block {
width: 100%;
}
By setting the width to 100%, the div is expanded to fill the browser window, eliminating side borders as opposed to the fixed 400px width previously specified.
Change 3 - Styling details were appended to the new "block2" div:
.block2 {
height: 100px;
width: 400px;
margin: auto;
}
The dimensions remain as initially defined, while centering the div within "block" (and subsequently the screen due to the width being set at 100%) through the 'margin:auto' instruction.
I trust this explanation proves beneficial. Apologies for the extensive detail, I find value in thorough explanations to enhance comprehension and aid in resolving issues effectively.
:)