Containers for posts, pages and widgets

I have set the Content Layout to Separate Containers and I get them correctly at homepage when listing a row of posts in 3 columns (white background for the excerpts on gray background for the page), but the /blog/ page lists by default all excerpts, one after the other, without separation. The same for the sidebar column.

In order to change this I added the following:

.separate-containers .site-main > * {
  margin-bottom: 20px;
	margin-top: 20px;  
	margin-bottom: 24px;
}

.separate-containers .inside-right-sidebar, .separate-containers .inside-left-sidebar {
  margin-top: 20px;  
	margin-bottom: 20px;
	margin-left: 24px;
}

but I still don't get the bottom margin correctly for the post/page contents to separate them from the blue footer.
Are those 2 snippets correct or did I miss something?