<!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 | Responsive Layouts</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="parent">
        <div class="child">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nesciunt nam ullam quo incidunt rerum corporis reprehenderit blanditiis natus quae consequatur, possimus, dolores, mollitia a quis temporibus eos ut similique cupiditate!
        </div>
    </div>
</body>
</html>
*{
    box-sizing: border-box;
}

body{
    margin:0;
}

.parent{
    background-color:purple;
    padding:50px;
    /* width:900px; */
    /*This kills the responsiveness */
    /* default value for width is 100% */
    width:80%;
    margin:0 auto;
    /* this margin sets the parent on the center of the screen*/
}

.child{
    background-color: rgb(238, 159, 238);
    width:50%;
    height:250px;
    /* normally we wouldnt include a height, its just to get started */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.