Proofread; reconcile differences between code snippets in Readme and code in drop-in.css

Author: webdevjeffus

README.md

@@ -199,10 +199,9 @@ header h1 {
   float: left;
 }
 
-header nav ul {
-  list-style: none;
-  float: right;
-}
+header nav { float: right; }
+
+header nav ul { list-style: none; }
 
 header nav li {
   display: inline-block;
@@ -227,9 +226,9 @@ The general **header** rule just puts 1rem of padding around all four sides of t
 In the **header h1** rule, we specify that any and all **\<h1>** elements in the **\<header>** should be rendered at a size of 3rems. Our CSS selector for the rule, "header h1", won't touch **\<h1>**s in any other element of the app&mdash;for example, an **\<h1>** in the **\<main>** element will be displayed at its default size, not at the 3rems specified in this rule. We also set the **header h1** to **float: left**, so that it displays against the left margin of the header section.
 
 #### header nav
-The rest of the styles in the "Header Styles" section deal with the components of the header's **\<nav>** element. To be sure that we don't affect list or nav elements elsewhere in the app, we begin each selector with a mention of both the **\<header>** and the **\<nav>** types. The **header nav ul** rule eliminates the bullet points that appear by default on unordered lists.
+The rest of the styles in the "Header Styles" section deal with the components of the header's **\<nav>** element. To be sure that we don't affect list or nav elements elsewhere in the app, we begin each selector with a mention of both the **\<header>** and the **\<nav>** types. The **header nav** rule, which specifies **float: right**, pushes the nav links to the right-hand margin of the header. The **header nav ul** rule eliminates the bullet points that appear by default on unordered lists.
 
-In the **header nav li** rule, **display: inline-block;** changes the links in the nav bar to appear on a horizontal row, instead of a vertical list. The "border-left" property establishes a vertical border between each pair of links, and the **header nav li:first-child** rule _turns off_ that border for the first link on the nav bar.
+In the **header nav li** rule, **display: inline-block;** changes the links in the nav bar to appear as a horizontal row, instead of a vertical list. The **border-left** property establishes a vertical border between each pair of links, and the **header nav li:first-child** rule _turns off_ that border for the first link on the nav bar.
 
 #### header nav input[type="submit"]
 The last rule in this section, which styles **header nav input[type="submit"]** elements, is necessary because HTML and Sinatra all but _require_ the "logout" link to be created as a button. Since ending the current session requires a POST route with a hidden input to carry the "delete" action, it is usually created as a single-button form, rather than as a simple link. This rule removes the border and background from the button, so that it looks and behaves like the other links in the nav bar; recall that we set the colors for this input in the "Colors" section, above.
@@ -293,7 +292,7 @@ Almost every index view in a Sinatra or Rails app is going to display some sort
 
 Forms are also very common in Sinatra and Rails apps, but again, the default styling for them is generally pretty ugly and unfriendly. We'll handle this mostly by styling the form input elements.
 
-First, we'll set the **display** property of **main input** elements to **block**, so each one appears on its own line on the page. If you add a label for an input, it will default to **display: inline**, so labels will show up to the left of the text box they identify. If you prefer labels on the line above, you can add the following style rule to your CSS file:
+First, we'll set the **display** property of **main input** elements to **block**, so each one appears on its own line on the page. If you add a label for an input, it will default to **display: inline**, so labels will show up to the left of the text box they identify. If you prefer labels on the line above, you can add the following style rule to your CSS file to put them there:
 
 ```css
 main label { display: block; }
@@ -317,7 +316,6 @@ main td {
   width: 25%;
   padding: 0.25rem 0;
   text-align: center;
-  border: 1px solid #222;
 }
 ```
 

drop-in.css

@@ -1,4 +1,4 @@
-/* jeffstrap.css */
+/* drop-in.css */
 
 
 /* RESETS */
@@ -86,13 +86,9 @@ header h1 {
   float: left;
 }
 
-header nav {
-  float: right;
-}
+header nav { float: right; }
 
-header nav ul {
-  list-style: none;
-}
+header nav ul { list-style: none; }
 
 header nav li {
   display: inline-block;
@@ -116,6 +112,8 @@ main {
   clear: both;
 }
 
+/* Lists */
+
 main ul { margin: 0 auto 1.5rem; }
 
 main ul li {
@@ -124,13 +122,18 @@ main ul li {
   font-size: 1.25rem;
 }
 
+/* Forms */
+
 main input {
   display: block;
   margin-bottom: 0.75rem;
   width: 100%;
 }
 
-main input[type="text"] { padding: 0 0.5rem; }
+main input[type="text"],
+main input[type="password"] {
+  padding: 0 0.5rem;
+}
 
 main textarea {
   width: 100%;
@@ -141,6 +144,8 @@ main textarea {
 
 main input[type="submit"] { width: 12rem; }
 
+/* Tables */
+
 main table {
   width: 100%;
   margin-bottom: 1rem;