Stylus : How to remove annoying sidebar and top bar on Youtube index page

Question

I am currently facing an issue on Youtube with Stylus. My previous stlye for the page just got deleted somehow after updating Chrome.

Right now I am in the process of redoing all that work that went into making Youtube easy to look at. There was a blog post back in the day where I copied most of the CSS code from, but for the life of me cannot find that page anymore.

There are 2 things I want to achieve on the index page of Youtube:

1. Remove the sidebar completely. I don't want it. It just eats up space on the screen and pushes things to the right.
2. Remove the theme recommedations that are above the recommended videos. This also just eats up space on the screen.

Please note that I want to not just disappear them from the screen, I also want the page to use the space that was now freed up by these items to be filled up by the videos that are on the index page.

Image of the sidebar I'm talking about: https://i.stack.imgur.com/KfqRz.png
Image of the top bar I'm talking about: https://i.stack.imgur.com/8vhNn.png

When I go into F12 mode of Chrome, I see that the sidebar should be "ytd-mini-guide-renderer", and the top bar should be "ytd-feed-filter-chip-bar-renderer". Of course, I could be mistaken, but to mee it seems like these are what I should need to change.
When I go to Stylus, and change the width of the sidebar to 0 px, and change the height of the chip bar renderer to 0 px, nothing happens.
Can someone please quickly help me with writing a quick CSS code that does that?

ytd-mini-guide-renderer{width:0px}
ytd-feed-filter-chip-bar-renderer{height:0px}

I also want to remove the sidebar on https://youtube.com/shorts too. I don't know if I have to do something else too to achieve that, but I thought I would mention it.
My extensive knowledge of CSS and Stylus is way below the minimum to properly do what I want.
Thank you for reading this little help request. I'm looking forward to your aswers guys. :)