Where to insert overflow:x? - html

Question

I have a grey background rectangle upon which I've to position elements with position: relative, the rectangle should go out of the page and I'd have to ue overflow-x: hidden, but the problem is that when I use it it messes up all the page. Where should I place overflow-x without messing up all the page? Should I change the HTML?
I tried to place it in main or to wrap the div inside another div use the wrapper for overflow-x, but it still messes up all the page!
body {margin: 0px;
padding: 0px;
font-size: 16px;}
.under-bg_blue-big {float: right;
height: 690px;
width: 690px;
background-image: url(../img/bg-intro-desktop.svg);}
.list {position: relative;
float: right;
color: white;
z-index: 5;
margin-top: 36px;
margin-right: 0px;
padding-left: 0px;}
nav > ul > li {list-style: none;
display: inline;
position: relative;
z-index: 5;}
.under-bg_white-btn {margin-right: 16px;
font-size: 12px;}
.under-bg_green-btn {background-color: #06d89b;
padding: 8px 21px;
border-radius: 5px;
margin-right: 24px;
font-size: 12px;}
.logo {float: left;
width: 180px;
margin-top: 4.58%;
margin-left: 8.19%;
position: relative;
z-index: 1;
margin-bottom: 170px;
clear: both;}
.block-hero {text-align: center;}
.block-hero__hero {float: right;
position: relative;
top: 190px;
right: -50px;}
.section-a {padding-top: 284px;
margin-left: 8.19%;}
.section-a__heading {width: 34.375%;
font-size: 40px;}
.section-a__par {width: 35.28%;}
.section-a__btn {padding: 27px 90px;
background-color: #06d79d;
border: none;
border-radius: 5px;
color: white;}
.under-bg_grey {background-color: #fafafa;
height: 744px;
width: 150%;
margin-top: 30%;
position: relative;
left: -50px;
clip-path: inset(0% 0% 0% 0% round 100px);
font-size: 14px;
z-index: 0;
transform: rotate(15.589deg);
clear: both;}
<main>
<section class="section-a">
<h1 class="section-a__heading">All your files in one secure location, accessible anywhere.</h1>
<p class="section-a__par">Fylo stores all your most important files in one secure location. Access them wherever you need, share and collaborate with friends, family and co-workers.</p>
<button type="button" name="button" class="section-a__btn">Get
Started</button>
</section>
<div class="under-bg_grey"></div>
</main>

Answer 1

If you want the div with the class 'under-bg_grey' as a background for other elements you can change the styles for the particular element as follows.
.under-bg_grey {
background-color: #fafafa;
height: 744px;
width: 150%;
margin-top: -25%;
position: relative;
left: -50px;
clip-path: inset(0% 0% 0% 0% round 100px);
font-size: 14px;
z-index: -1;
transform: rotate(15.589deg);
clear: both;
}
Think so there would not be any need for overflow-x property.
I hope the above provides what you needed :)

Answer 2

add this code..
css
main{
overflow-x:hidden;
}
.under-bg_grey {
background-color: #fafafa;
height: 744px;
width: 100%;
margin-top: 30%;
position: relative;
left: -50px;
clip-path: inset(0% 0% 0% 0% round 100px);
font-size: 14px;
z-index: 0;
transform: rotate(15.589deg);
clear: both;
}

Answer 3

Adding overflow-x: hidden to the main element should do the trick.
As in:
main {
overflow-x: hidden;
}
Here's the working demo:
body {
margin: 0px;
padding: 0px;
font-size: 16px;
}
main {
overflow-x: hidden;
}
.under-bg_blue-big {
float: right;
height: 690px;
width: 690px;
background-image: url(../img/bg-intro-desktop.svg);
}
.list {
position: relative;
float: right;
color: white;
z-index: 5;
margin-top: 36px;
margin-right: 0px;
padding-left: 0px;
}
nav>ul>li {
list-style: none;
display: inline;
position: relative;
z-index: 5;
}
.under-bg_white-btn {
margin-right: 16px;
font-size: 12px;
}
.under-bg_green-btn {
background-color: #06d89b;
padding: 8px 21px;
border-radius: 5px;
margin-right: 24px;
font-size: 12px;
}
.logo {
float: left;
width: 180px;
margin-top: 4.58%;
margin-left: 8.19%;
position: relative;
z-index: 1;
margin-bottom: 170px;
clear: both;
}
.block-hero {
text-align: center;
}
.block-hero__hero {
float: right;
position: relative;
top: 190px;
right: -50px;
}
.section-a {
padding-top: 284px;
margin-left: 8.19%;
}
.section-a__heading {
width: 34.375%;
font-size: 40px;
}
.section-a__par {
width: 35.28%;
}
.section-a__btn {
padding: 27px 90px;
background-color: #06d79d;
border: none;
border-radius: 5px;
color: white;
}
.under-bg_grey {
background-color: #fafafa;
height: 744px;
width: 150%;
margin-top: 30%;
position: relative;
left: -50px;
clip-path: inset(0% 0% 0% 0% round 100px);
font-size: 14px;
z-index: 0;
transform: rotate(15.589deg);
clear: both;
}
<main>
<section class="section-a">
<h1 class="section-a__heading">All your files in one secure location, accessible anywhere.</h1>
<p class="section-a__par">Fylo stores all your most important files in one secure location. Access them wherever you need, share and collaborate with friends, family and co-workers.</p>
<button type="button" name="button" class="section-a__btn">Get
Started</button>
</section>
<div class="under-bg_grey"></div>
</main>

Answer 4

take one div with class name name grey_box and next put your div which has class name under-bg_grey inside it. Take .grey_box div width 100% and overflow-x:hidden. I think this code will help you,
<style>
.grey_box{
width:100%;
overflow-x:hidden;
}
</style>
<body>
<div class="grey_box">
<div class="under-bg_grey"></div>
</div>
</body>