With CSS : How do i make all content on the page to fit to page?

Question

I looked up most of the questions on here about fit to page but my case may be a little different.

On my page, I have the followings:

[Header ]

1. Title (picture from assets)
2. 6 world clocks
3. marquee
4. Text
5. 4 buttons
6. title

[Middle] Tabbed View of Three Lists

---

I got a request from my client saying on his TV Screen monitor, he has to shrink the web page to 70% so that he could see the whole page without 'Scroll Bar' at the bottom.

So I copied that homepage and worked from scratch to find out which of these content editors were making the problem.

All the content editors are set to 'No - fit to size'. I found that 'marquee' & 'tabbed list' were the problem (there might be more) when I added them to my Copied Homepage, the scroll bar appeared.

When I went to Source Code for Marquee, It had 1500px; so I changed it to 100%; Then for the Tabbed List, I went to the Header and added a content editor and on the Source Code I inserted:

<style type="text/css"> .ms-vh-div[DisplayName='ColumnName'] { width: 100%; } </style>​​

Which removed the scroll bar and I have Duo Monitors with slightly different size and both looked fine on Chrome and IE.

I told my client to test it but he told me, it got little better because now he only needs to Shrink 75% from 70%.

I want so that this page will fit to screen no matter how big the screen is.

Is there a solution to this?

Thanks!