CSS-Media-Queries/max-width/max-width.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Max Width</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: sans-serif;
      }
      h1 {
        text-align: center;
      }
      .container {
        background: #23424a;
        color: white;

        width: 80%;
        max-width: 700px;
        margin: 0 auto;

        padding: 2em;
        /* height: 300px; */
      }
      .intro-content {
        width: 50%;
      }
    </style>
  </head>
  <body>
    <h1>Conquering Responsive Layouts: Challenge 1</h1>

    <div class="container">
      <div class="intro-content">
        <h1>Lorem ipsum dolor sit.</h1>
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod unde
          rerum, deleniti ea obcaecati sint hic odit dicta tenetur qui ut
          dolorum provident sit, atque, reprehenderit nulla voluptate! Officiis,
          consectetur?
        </p>
        <p>
          Iste ipsa enim delectus porro, ullam repellendus maiores quis rem
          debitis cum, necessitatibus architecto dolor? Velit, ad quaerat
          blanditiis veritatis expedita totam vel voluptatem officiis officia ab
          modi voluptatibus obcaecati.
        </p>
        <p>
          Accusantium minima iusto nobis fuga hic explicabo unde illum,
          perferendis et animi aperiam quaerat, eaque deleniti alias blanditiis
          exercitationem commodi repudiandae ullam consequatur incidunt
          reiciendis repellat officia laboriosam. Esse, modi.
        </p>
        <p>
          Expedita cupiditate iure odit, delectus placeat optio magnam assumenda
          mollitia aspernatur at saepe nisi commodi natus excepturi voluptate.
          Recusandae nisi dolorem, necessitatibus optio aliquam repellat.
          Adipisci, incidunt. Consequuntur, natus nulla.
        </p>
      </div>
    </div>
  </body>
</html>