Responsive Web Design - Tutorial Responsive Posts with html and css

HTML CODE
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width , initial-scale=1.0"> <title>Responsive Website</title> </head> <body> <div class="posts"> <div class="post"> <img src="img.jpg" alt=""> <h2> Post Subject</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p> </div> <div class="post"> <img src="img.jpg" alt=""> <h2> Post Subject</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p> </div> <div class="post"> <img src="img.jpg" alt=""> <h2> Post Subject</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p> </div> <div class="post"> <img src="img.jpg" alt=""> <h2> Post Subject</h2> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p> </div> </div> </body> </html>
CSS CODE
body{ margin: 0; padding: 0; font-family: sans-serif; } .posts{ width: 100%; max-width: 1200px; margin: auto; overflow: hidden; } .post{ width: 47%; background: #f1f1f1; overflow: hidden; margin: 10px; border-radius: 6px; box-shadow: 0 0 10px black; float: left; } .post img{ width: 100%; height: 280px; } .post h2{ margin: 0; padding: 0 10px; } .post p{ margin: 0; margin-bottom: 10px; text-align: justify; padding: 0 10px; } @media (max-width:700px){ .post{ width: 96%; margin: 2%; } }