Adapter CSS à différentes tailles d'écran : un guide

Question

J'ai ce code CSS et mon problème est qu'à cause de padding-top (un peu d'espace à partir du haut), ma page est trop grande, ce qui fait qu'elle a l'option "défilement" et ne rentre pas dans tout l'écran.

Comment puis-je désactiver l'option de défilement ?

* {
    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;
}

J'ai essayé d'ajouter overflow:hidden; et ça marche mais ça coupe certains des divs du bas