From 150cf324da1b11c8e267ee8432339f70b15d7e74 Mon Sep 17 00:00:00 2001
From: Chris <fayadchristina@gmail.com>
Date: Tue, 5 Oct 2021 19:07:45 +0200
Subject: [PATCH 1/2] Reformating the nested elements inside the 'header tag'

---
 index.html | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index cbc1f11..8b0bac0 100644
--- a/index.html
+++ b/index.html
@@ -10,13 +10,13 @@
 	    <header>
 	    	<div id="page-banner">
 	    		<h1 class="title">Bookorama</h1>
-          <p>Books for Ninjas</p>
-          <form id="search-books">
-            <input type="text" placeholder="Search books..." />
-          </form>
-	    	</div>
-	    </header>
-	    <div id="book-list">
+          		<p>Books for Ninjas</p>
+          		<form id="search-books">
+            		<input type="text" placeholder="Search books..." />
+          		</form>
+			</div>
+		</header>
+		<div id="book-list">
 	    	<h2 class="title">Books to Read</h2>
 	    	<ul>
 	    		<li>
@@ -41,8 +41,7 @@ <h2 class="title">Books to Read</h2>
 	    	<input type="text" placeholder="Add a book..." />
 	    	<button>Add</button>
 	    </form>
-
-    </div>
+	</div>
     <script src="app.js"></script>
   </body>
 </html>

From 55e216699bb0fbfdcb16a6d19b7c418ca28926bf Mon Sep 17 00:00:00 2001
From: Chris <fayadchristina@gmail.com>
Date: Tue, 5 Oct 2021 19:10:56 +0200
Subject: [PATCH 2/2] Removing 'display: inline-block' because 'float: left'
 only works with 'display: block/none'

---
 styles.css | 175 +++++++++++++++++++++++++++--------------------------
 1 file changed, 89 insertions(+), 86 deletions(-)

diff --git a/styles.css b/styles.css
index 361284d..aeeb8d9 100644
--- a/styles.css
+++ b/styles.css
@@ -1,118 +1,121 @@
-body{
-    font-family: Tahoma;
-    color: #444;
-    letter-spacing: 1px;
+body {
+  font-family: Tahoma;
+  color: #444;
+  letter-spacing: 1px;
 }
 
-h1, h2{
-    font-weight: normal;
+h1,
+h2 {
+  font-weight: normal;
 }
 
-#wrapper{
-    width: 90%;
-    max-width: 960px;
-    margin: 20px auto;
-    border-radius: 6px;
-    box-shadow: 0px 1px 6px rgba(0,0,0,0.2);
-    box-sizing: border-box;
-    padding: 0 0 20px;
-    overflow: hidden;
-    border: 1px solid lightgray;
+#wrapper {
+  width: 90%;
+  max-width: 960px;
+  margin: 20px auto;
+  border-radius: 6px;
+  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  padding: 0 0 20px;
+  overflow: hidden;
+  border: 1px solid lightgray;
 }
 
-#page-banner{
-    background: #eee ;
-    padding: 10px 0;
+#page-banner {
+  background: #eee;
+  padding: 10px 0;
+}
 
+#page-banner h1,
+#page-banner p {
+  width: 100%;
+  text-align: center;
+  margin: 10px 0;
 }
 
-#page-banner h1, #page-banner p{
-    width: 100%;
-    text-align: center;
-    margin: 10px 0;
+#page-banner input {
+  width: 90%;
+  max-width: 300px;
+  margin: 20px auto;
+  display: block;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 16px;
+  color: #444;
 }
 
-#page-banner input{
-    width: 90%;
-    max-width: 300px;
-    margin: 20px auto;
-    display: block;
-    padding: 8px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 16px;
-    color: #444;
+#book-list,
+#add-book,
+#tabbed-content {
+  margin: 30px;
 }
 
-#book-list, #add-book, #tabbed-content{
-    margin: 30px;
+#book-list ul,
+#tabbed-content ul {
+  list-style-type: none;
+  padding: 0;
 }
 
-#book-list ul, #tabbed-content ul{
-    list-style-type: none;
-    padding: 0;
+#book-list li {
+  padding: 20px;
+  border-left: 5px solid #ddd;
+  margin: 20px 10px;
 }
 
-#book-list li{
-    padding: 20px;
-    border-left: 5px solid #ddd;
-    margin: 20px 10px;
+#book-list li:hover {
+  border-color: #9361bf;
 }
 
-#book-list li:hover{
-    border-color: #9361bf;
+.delete {
+  float: right;
+  background: #9361bf;
+  padding: 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: white;
 }
 
-.delete{
-    float: right;
-    background: #9361bf;
-    padding: 6px;
-    border-radius: 4px;
-    cursor: pointer;
-    color: white;
+.delete:hover {
+  background: #333;
 }
 
-.delete:hover{
-    background: #333;
+#add-book {
+  width: 400px;
+  margin: 0 auto;
 }
 
-#add-book{
-    width: 400px;
-    margin: 0 auto;
+#add-book input {
+  display: block;
+  margin: 20px 0;
+  padding: 10px;
+  border: 1px solid #ccc;
+  font-size: 16px;
+  border-radius: 4px 0 0 4px;
+  box-sizing: border-box;
+  width: 300px;
+  float: left;
 }
 
-#add-book input{
-    display: block;
-    margin: 20px 0;
-    padding: 10px;
-    border: 1px solid #ccc;
-    font-size: 16px;
-    border-radius: 4px 0 0 4px;
-    box-sizing: border-box;
-    width: 300px;
-    float: left;
-}
-
-#add-book button{
-    border: 1px solid #9361bf;
-    background: #9361bf;
-    padding: 10px 20px;
-    font-size: 16px;
-    display: inline-block;
-    margin: 0;
-    border-radius: 0 4px 4px 0;
-    cursor: pointer;
-    width: 100px;
-    float: left;
-    margin: 20px 0;
-    border-left: 0;
-    color: white;
+#add-book button {
+  border: 1px solid #9361bf;
+  background: #9361bf;
+  padding: 10px 20px;
+  font-size: 16px;
+  margin: 0;
+  border-radius: 0 4px 4px 0;
+  cursor: pointer;
+  width: 100px;
+  float: left;
+  margin: 20px 0;
+  border-left: 0;
+  color: white;
 }
 
-#add-book:after{
-    content: '';
-    display: block;
-    clear: both;
+#add-book:after {
+  content: "";
+  display: block;
+  clear: both;
 }
 
 /*