Adapting CSS to different screen sizes: A guide

Question

I have this CSS code and my problem is that due to the padding-top (some space from the top) my page is too big causing it to have the "scroll" option and not fit the entire screen .

How can I disable the scrolling option?

* {
    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 adding overflow:hidden; and it works but it cuts off some of the bottom divs

Answer 1

Add box-sizing: border-box; to .container to include the padding in the percentage value of height.