I am trying to update my website by changing the header and making the changes responsive.

I have been using;

#container {width: 100%;}
#container .menu {display: none;}
#container .slideshow {width: 100%; height: auto;}
#container .buttns {display: none;}
Where container is the division and .menu etc is the class.

In the html page I did change divisions in the container to class="slideshow" etc

What I end up with is with the classes being stacked on top of each other and the slideshow staying at full size.

On a full screen the page looks like this! which is how it should look.

I just want to remove the menu and buttons and make the slideshow responsive.
The other sections work OK.

Can someone advise me on how to correct this? Thanks