<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day1-Height</title>
    <link rel="stylesheet" href="height_styles.css">
</head>
<body>  
    <div class="container">
        <h1>Lorem Ipsum</h1>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ipsum laborum, nemo, tempore ex totam facilis quas praesentium deserunt aspernatur nulla earum non ad est inventore adipisci doloremque voluptate omnis.
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde modi nemo voluptatibus aperiam, eligendi enim expedita consectetur fugiat recusandae cupiditate deleniti molestiae velit. Odio molestias velit distinctio ex voluptates dicta?
        </p>

    </div>
</body>
</html>
*{
    box-sizing: border-box;
}

body{
    margin: 0;
    }

.container{
    background-color: purple;
    color:white;
    width:80%;
    margin: 0 auto;
    /* height:300px; */
    /* this height gives some empty background at the bottom so when you the same effect instead of specifying height give padding */
    /* Never give this, when the screen gets smaller the content overflows */
    padding:5em;
    /* default font size is 16px therefore 16 * 5 = 80px hence makes thes ite responsive */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.