Ensure that div.content will always have margins

Author: xfq

techniques/authoring-html.en.html

@@ -61,6 +61,24 @@
     float: none;
 }
 
+/* Responsive fix for narrow screens */
+@media (max-width: 768px) {
+    div.content {
+        margin: 1em;
+        padding: 1.5em;
+        max-width: none;
+        box-sizing: border-box;
+    }
+}
+
+@media (max-width: 480px) {
+    div.content {
+        margin: 0.5em;
+        padding: 1em;
+        border-radius: 4px;
+    }
+}
+
 /* Headings */
 h1, h2, h3, h4, h5, h6 {
     font-family: "Georgia", serif;
@@ -3280,7 +3298,7 @@ <h5 class="howto">How to's</h5>
           </li>
           <li class="nonw3">
             <p class="link"><a href="http://bittersmann.de/articles/no-flags/">About languages and flags</a></p>
-            <p class="desc">On some Web pages you’ll find country flags as symbols for languages. This article explains why this approach is problematic, and what you should do instead.</p>
+            <p class="desc">On some Web pages you'll find country flags as symbols for languages. This article explains why this approach is problematic, and what you should do instead.</p>
           </li>
         </ul>
       </div>