How to fit CSS to the screen size? – Html

I have this CSS code, my problem is that because of the padding-top (to have some space from the top) my page is too big what makes it to have ‘scroll’ option and it doesn’t fit the whole screen.

How do I make it so the scroll option will be disabled?

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}
body {
    color: #444;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f7f7f7;
}
.container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding-top: 20px;
}

I tried to add overflow: hidden; which works but then it cuts off some of my divs at the bottom