styling updates

Author: Kayla Wilkins

src/components/2_molecules/search.js

@@ -27,26 +27,26 @@ export default class Search extends Component {
           {this.state.results.map((n, i) => {
             const { query } = this.state;
             return (
-              <div key={i}>
+              <React.Fragment key={i}>
                 {n.getSummary &&
                   n.getSummary.toLowerCase().includes(query.toLowerCase()) && (
-                    <li className="list-reset p-1 md:p-0">
+                    <li className="list-reset p-1 px-4 md:p-0 md:px-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}`}>
                         {n.getSummary}
                       </Link>
                     </li>
                   )}
                 {n.postSummary &&
                   n.postSummary.toLowerCase().includes(query.toLowerCase()) && (
-                    <li className="list-reset p-1 md:p-0">
+                    <li className="list-reset p-1 px-4 md:p-0 md:px-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}/#post`}>
                         {n.postSummary}
                       </Link>
                     </li>
                   )}
                 {n.putSummary &&
                   n.putSummary.toLowerCase().includes(query.toLowerCase()) && (
-                    <li className="list-reset p-1 md:p-0">
+                    <li className="list-reset p-1 px-4 md:p-0 md:px-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}/#put`}>
                         {n.putSummary}
                       </Link>
@@ -56,13 +56,13 @@ export default class Search extends Component {
                   n.deleteSummary
                     .toLowerCase()
                     .includes(query.toLowerCase()) && (
-                    <li className="list-reset p-1 md:p-0">
+                    <li className="list-reset p-1 px-4 md:p-0 md:px-0">
                       <Link to={`/api/v4/${_.kebabCase(n.name)}/#delete`}>
                         {n.deleteSummary}
                       </Link>
                     </li>
                   )}
-              </div>
+              </React.Fragment>
             );
           })}
           {this.state.query && this.state.results.length === 0 && (

src/css/components/4_pages/api-page.css

@@ -118,7 +118,8 @@
   left: 0;
   width: 100%;
   z-index: 1;
-  padding: 0 1rem;
+  padding: 1rem;
+  background-color: #fff;
 }
 
 .search-results-list {