Solved Sidebar width issue: Content should be wider

Hello

I've tried a lot of different CSS to change the width and padding but nothing works. There is a lot of space on the right side of the widget area, sidebar, the widgets are not 100% of the sidebar.





I'd llke it to be in this space here with less padding on the right. I've inspected the element and tried to edit it with various code:

/* Adjusting the sidebar to fill the space */
#sidebar {
width: 100%; /* Ensure the sidebar takes up the full width of its container */
padding: 0; /* Remove any padding */
margin: 0; /* Remove any margin */
}


and then I tried this:
/* Target the sidebar container */
#sidebar {
width: 100%; /* Ensure the sidebar takes up the full width of its container */
padding: 0; /* Remove any padding */
margin: 0; /* Remove any margin */
}
/* Target the widget elements inside the sidebar */
#sidebar .et_pb_widget {
width: 100%; /* Ensure each widget takes up the full width of the sidebar */
padding: 0; /* Remove any padding */
margin: 0; /* Remove any margin */
float: none; /* Prevent floating */
}


and so on...

/* Ensure the main container takes the full width */
#content-area.clearfix {
display: flex;
flex-direction: row;
width: 100%;
padding: 0;
margin: 0;
}
/* Ensure the sidebar takes the full width of its parent */
#sidebar {
flex: 1; /* Allows the sidebar to take available space */
padding: 0;
margin: 0;
}
/* Ensure each widget inside the sidebar takes the full width */
#sidebar .et_pb_widget {
width: 100%;
padding: 0;
margin: 0;
float: none;
}



but still it is just not working in the way I would like, I just want to reduce the huge gap on the right hand side for blog posts only.

 

Thank you - this has worked!