From ad17a97e0ebd54170cfed9f7b9ce55c3f5870984 Mon Sep 17 00:00:00 2001
From: Aanyaa26 <128315909+Aanyaa26@users.noreply.github.com>
Date: Fri, 23 Feb 2024 23:16:34 +0530
Subject: [PATCH] Center aligned the Search Bar (#610)

---
 index.html |  4 +++-
 style.css  | 12 ++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index dcbbde441..c756c0c1d 100644
--- a/index.html
+++ b/index.html
@@ -82,7 +82,9 @@ <h3>All calculators, spot in a single place!!</h3>
         <!-- Search Bar -->
         <div id="searchBar">
             <h1>Search Calculator</h1><br>
-            <input type="text" id="calculatorSearch" placeholder="Enter Calculator Name" oninput="filterCalculators()">
+            <div class="search-input-container">
+                <input type="text" id="calculatorSearch" placeholder="Enter Calculator Name" oninput="filterCalculators()">
+            </div>
         </div>
 
         <div class="box">
diff --git a/style.css b/style.css
index 067dc07df..11891ebdd 100644
--- a/style.css
+++ b/style.css
@@ -1670,12 +1670,18 @@ section {
     margin-top: 16px;
 }
 
+.search-input-container {
+    margin-left: 8rem;
+    align-items: center;
+    display: inline;
+}
+
 #searchBar button {
-    font-size: 2.5rem;
+    font-size: 2rem;
     background: transparent;
     border: 0;
     color: white;
-    margin-left: 1rem;
+    margin-left: 5px;
     background-color: #ff1b82;
     padding: .7rem;
     width: 8rem;
@@ -1709,6 +1715,8 @@ section {
     #searchBar input {
         width: 100%;
         font-size: 1.5rem;
+        align-items: center;
+        display: flex;
     }
 
     #searchBar button {