On removing the header using CSS

I am sure this question has been asked before, and I’ve been sifting through what look like should be answers, but am getting nowhere and I’ve shot about three hours so far in looking. My objective seems simple (to me): I want my main website page to have the header and image that I’ve selected to be those things, but I don’t want them to appear on every page of the site. Website is here: http://www.kdsmobilenotary.com, and I am currently using the Twenty Sixteen style sheet. I want visitors to my site to have the “full” experience when they land on the home page, but I want all other pages (for example, http://www.kdsmobilenotary.com/jurat/) to have only text, no extraneous header or footer or title or whatnot. The page ID of that page is 163, and I’ve figured out how to access the CSS of the theme (by going to Appearance-> Editor from the admin page and selecting a template from the right side of the screen). As near as I can tell, I need to edit one of these and add some code to tell the browser NOT to show a header/ footer on the page with the ID 163 of my site, but I’ve been trying this and when I click “Update file” and then reload the page in question, nothing every seems to change (the code I’ve tried adding to style.css is this:

body.page-id-163 #header,
body.page-id-163 #footer {
display: none;
}

at the beginning of the file). I am not understanding something correctly, or am not putting that “code” in the right place or in the right template, and my confidence and ability to negotiate the WordPress format are limited and it seems time to stop d!cking around and just ask. Please let me know if anyone can tell me how to do this. I think maybe I am getting close close but…?? I’d rather not have a solution that will vanish the next time that Twenty Sixteen gets updated.