Fixed the layout problem in home and shared pages

app/templates/home.html

@@ -61,7 +61,6 @@ body{
 
 .bookmark_box_background_color {
     background-color: #fff;
-    border-style: inset;
     border-radius: .5rem;
     background-image: url("static/logo/home_bookmark_logo.png");
     background-repeat: no-repeat;
@@ -75,12 +74,12 @@ body{
 }
 
 .list li {
-    display:inline-block;
-    vertical-align: middle;
+    display:block;
     list-style-position: outside;
     list-style-type: disc;
     text-align: left;
     list-style-type: none;
+    
 }
 .list_li_height {
     height: nowrap;
@@ -182,9 +181,10 @@ body{
                 </div>
               </div>
             </div>
-                <div class="card col-sm-8 col-xl-8">
-                    <div class="section-title">
-                        <h3 class="heading bold">List of bookmarks you have created</h3>
+            <div class="card">
+                <div class="container">
+                    <div class="col-md-12">
+                        <h2 class="text-center" style="padding-left:75px; padding-right:75px;">List of bookmarks you have created </h2>
                         <hr>
                         <!------  List of bookmarks you have created ---------->
                         <form method="POST">
@@ -193,42 +193,41 @@ body{
                         </form>
                         <br>
                     </div>
-                    <div class="row ">
-                        <!-- Code: Each Group of Box-->
-                        {% for bg, bml in bdic.items(): %}
-                        <div class="col-md-6 bookmark_box_background_color list_li_height" >
-                            <div class="inner_box">
-                                <h3>{{ bg }}</h3>
-                                <hr>
-                                <!-- Code: Each Link in the Box-->
-                                {% for bm in bml: %}
-                                <div class="row">
-                                    <div class="col.md-4" >
-                                        <ul class="list">
-                                            <li><span class="bull">(ICON)</span></li>
-                                            <li><span class="bull">{{ bm.name }}</span></li>
-                                            </div>
-                                            <div class="col.md-4" style="position:absolute; right:0;">
+                    <div class="row">
+                    {% for bg, bml in bdic.items(): %}
+                        <div class="col-md-6">
+                            <div class="bookmark_box_background_color" style="border-style: inset;">
+                                <div>
+                                    <h3 >{{ bg }}</h3>
+                                    <hr>
+                                    <!-- Code: Each Link in the Box-->
+                                    {% for bm in bml: %}
+                                    <div class="row">
+                                        <div class="col.md-4">
+                                            <ul class="list">
+                                            <li>(ICON) {{ bm.name }}</li>
+                                        </div>
+                                        <div class="col.md-4" style="position:absolute; right:17px;">
                                             <li class="href_link_button">
-                                                <a href="{{ bm.link }}">
-                                                    <img src="static/logo/link_logo.png"width="25" height="25">
-                                                </a>
-                                                <button type="submit">Edit</button>
-                                                <b class="text_border"><i>{{ bm.status }}</i></b></span></li>
+                                            <a href="{{ bm.link }}">
+                                            <img src="static/logo/link_logo.png"width="25" height="25">
+                                            </a>
+                                            <button type="submit">Edit</button>
+                                            <b class="text_border"><i>{{ bm.status }}</i></b>
                                             </li>
-                                            </div>
-                                        </ul>
-                                {% endfor %}
-                               </div>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    {% endfor %}
                                 <!-- (End) Code: Each Link in the Box (End)-->
-                                <br>
+                                </div>
                             </div>
+                            <br>
                         </div>
-                <!--(End) Code: Each Group of Box (End)-->
-                {% endfor %}
-                <div class="clearfix"></div>
+                        {% endfor %}
+                    </div>
+                </div>
             </div>
-            <div class="clearfix"></div>
         </div>
         </div>
     </div>

app/templates/shared.html

@@ -65,46 +65,36 @@ ul {
 <div class="mx-auto text-center">
 <div class="container">
     <div class="row">
-        <div class="col-md-12 col-sm-12">
-            <div class="section-title">
-                <h1 class="heading bold">List of bookmarks you have created</h1>
-                <hr>
-            </div>
-        </div>
-        <!-- Code: Each Group of Box-->
         {% for bg, bml in bdic.items(): %}
-        <div class="col-md-4 bookmark_box_background_color list_li_height"> 
-            <div class="inner_box" >
-                <h3>{{ bg }}</h3>
-                <hr>
-                <!-- Code: Each Link in the Box-->
-                {% for bm in bml: %}
-                <div class="row">
-                    <div class="col.md-4">
-                        <ul class="list">
-                            <li><span class="bull">ICON {{ bm.name }}</span></li>
+            <div class="col-md-4">
+                <div class="bookmark_box_background_color" style="border-style: inset;">
+                    <div>
+                        <h3 >{{ bg }}</h3>
+                        <hr>
+                        <!-- Code: Each Link in the Box-->
+                        {% for bm in bml: %}
+                        <div class="row">
+                            <div class="col.md-4">
+                                <ul class="list">
+                                <li>(ICON) {{ bm.name }}</li>
                             </div>
-                            <div class="col.md-4" style="position:absolute; right:0;">
-                            <li class="href_link_button">
+                            <div class="col.md-4" style="position:absolute; right:17px;">
+                                <li class="href_link_button">
                                 <a href="{{ bm.link }}">
-                                    <img src="static/logo/link_logo.png"width="25" height="25">
+                                <img src="static/logo/link_logo.png"width="25" height="25">
                                 </a>
                                 <button type="submit">Edit</button>
-                            </li>
+                                <b class="text_border"><i>{{ bm.status }}</i></b>
+                                </li>
+                                </ul>
                             </div>
-                        </ul>
-                {% endfor %}
-               </div>
-                <!-- (End) Code: Each Link in the Box (End)-->
+                        </div>
+                        {% endfor %}
+                    <!-- (End) Code: Each Link in the Box (End)-->
+                    </div>
+                </div>
                 <br>
             </div>
+            {% endfor %}
         </div>
-        <!--(End) Code: Each Group of Box (End)-->
-        {% endfor %}
-        <div class="clearfix"></div>
-    </div>
-    <div class="clearfix"></div>
-</div>
-<div class="clearfix"></div>
-{% endblock %}
-</div>
+{% endblock %}