Group multiple blocks into a single div/container

I've put an intro section on my page that spans the height of the view port. I have some intro text that I have aligned center horizontally and vertically in the middle. (Tour name, location, date)

Below that I want a bar with content (tour meta) that spans the width of the viewport but absolutely positioned at the bottom of the page. I currently have it immediately following the "tour title". I know I can use css to target a div to position it at the bottom but not sure how to group these blocks within it.

I want the 6 blocks below. all the way at the bottom and want to add opacity to a "contaner" div to make it stand out more. Anyone have any ideas how I can group those 5 text blocks within a simple container to do that

I thought I added a sample url  - here it is https://www.bestridesdc.com/test-tour

I think I sort of solved my issue. I added a section below the top section that spans the vetical view port and gave the second section an explicit height of 10. Then with custom css I gave the second section a negative top margin of -10vh.

On that note - when I explicitly give the section a height, what does the "1 - 100" number value translate to? so I can be more precise with the negative value of the second section?

1 caveat - every time I duplicate the page to create a new tour I (my client) will have to add more custom css to accommodate the new section ID assigned by SS to the second section on the page...

Still looking for additional input if any one has it...

5 hours ago, frescova said:

what does the "1 - 100" number value translate to?

1vh - 100vh i.e. 1% -100% of the viewport height. This is a minimum height, not an absolute height, so if you put lots of content in it may exceed this height value.