still struggling with the css

app/templates/app/detail_materi.html

@@ -225,9 +225,14 @@
             </div>
         </div>
     </div>    
+
+
+
+
 </div>
-<div>    
-    <div class="row menu-wrapper mr-4 ml-4 p-3">
+
+
+<div class="row menu-wrapper mr-4 ml-4 p-3">
     <nav class="navbar navbar-expand-sm border-top border-bottom p-0 mt-3 mb-3">
         <ul class="navbar-nav">
             <li class="nav-item">
@@ -235,15 +240,11 @@
             </li>
         </ul>
     </nav>
-    </div>
-
-    <div class="row materi-data mr-4 ml-4 p-3 shadow-sm rounded">
-        <div class="cover">
-            <img src={{materi_data.cover.url}} alt="cover">
-        </div>
+</div>
 
-        <div class="col-9 book">
-            <div class="similar-material">
+<div class="row menu-wrapper mr-4 ml-4 p-3">
+    <div class="col-3">
+        <!--Related Material-->
             {% for item in materi_list %}
             <div class="card book">
                 <img src={{item.cover.url}} class="card-img-top" alt="cover"
@@ -261,6 +262,7 @@
                  </div>
             </div>
             {% endfor %}
+            <!--Pagination-->
             <div class="center">
                 <div class="pagination">
                     <span class="step-links">
@@ -286,10 +288,10 @@
                 </div>
             </div>
     </div>
-        </div>
 </div>
 
-    <div class="row menu-wrapper mr-4 ml-4 p-3">
+<!--Description and Comment-->
+<div class="row menu-wrapper mr-4 ml-4 p-3 bg-f8f8fc">
         <nav class="navbar navbar-expand-sm border-top border-bottom p-0 mt-3 mb-3">
             <ul class="navbar-nav">
                 <li class="nav-item">
@@ -351,15 +353,18 @@
             {% endfor %}
         </div>
         {% endif %}
-    </div>
+</div>
 
-<footer class="sticky-footer bg-white p-4">
+<!-- Footer-->
+<div>
+    <footer class="sticky-footer bg-white p-4">
         <div class="container my-auto">
             <div class="copyright text-center my-auto">
                 <span>Copyright &copy; Diskominfo Kota Depok 2020</span>
             </div>
         </div>
-</footer>
+    </footer>        
+</div>
 
 <!-- Modal -->
 <div class="modal fade" id="notLoggedInModal" tabindex="-1" role="dialog" aria-labelledby="notLoggedInModalLabel"

app/templates/app/katalog_materi.html

@@ -182,7 +182,6 @@
             </div>
         </div>
     </div>
-
     <!-- /.container -->
 </body>
 

app/views.py

@@ -161,7 +161,7 @@ class DetailMateri(TemplateView):
             lstMateri = lstMateri.filter(categories=kategori.pk)
 
         context["materi_list"] = lstMateri
-        paginator = Paginator(context["materi_list"], 15)
+        paginator = Paginator(context["materi_list"], 4)
         page_number = request.GET.get('page')
         page_obj = paginator.get_page(page_number)
         context["materi_list"] = page_obj