Выравнивание дизайна base_manga.html

Создание Manga_catalog.html js

templates/static/css/manga_view.css

@@ -9,22 +9,40 @@ body {
 }
 
 .main-container {
-    max-width: 1200px;
     margin: 0 auto;
-    padding: 20px;
     flex: 1;
     display: flex;
     flex-direction: column;
     width: 100%;
+    min-height: 100vh;
+    align-items: center;
+    background-color: green;
+    justify-content: center;
+
+
+}
+
+.frame_content{
+    min-height: 100vh;
+    width: 50%;
+    place-items: center;
+    background-color: white;
+    flex-direction: column;
+    border: dashed white;
+
 }
 
 /* Хедер */
 .navigation-box {
     padding: 15px 0;
-    margin-bottom: 20px;
+    margin-bottom: 0;
+    width: 100%;
+    border-bottom: dashed green;
+
 }
 
 .breadcrumb {
+    justify-content: center;
     display: flex;
     align-items: center;
     list-style: none;
@@ -51,14 +69,13 @@ body {
 /* Контейнер сетки */
 .manga-grid-container {
     width: 100%;
-    padding: 10px 0;
     overflow-x: auto; /* На случай узких экранов */
 }
 
 /* Сетка превью */
 .grid-container {
     width: 100%;
-    margin-bottom: 20px;
+    margin: 20px;
 }
 
 .manga-grid {
@@ -66,7 +83,6 @@ body {
     grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
     gap: var(--grid-gap); /* Фиксированный отступ */
     justify-items: center;
-    margin: 0 auto;
     max-width: calc(
         (var(--preview-base-width) * var(--preview-scale) * var(--grid-columns)) +
         (var(--grid-gap) * (var(--grid-columns) - 1))
@@ -94,12 +110,12 @@ body {
 }
 
 
-
 /* Страница манги */
 .image-scaling-container {
     width: 100%;
     display: flex;
     justify-content: center;
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
 }
 
 .scalable-image {
@@ -107,18 +123,19 @@ body {
     height: auto;
     max-width: 100%;
     object-fit: contain;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
 }
 /* Футер */
 .footer-navigation {
-    margin-top: auto;
-    padding: 20px 0;
-    border-top: 1px solid #eee;
+    margin-top: 0;
+    padding: 15px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     width: 100%;
+    border-top: dashed green;
+
 }
 
 .dropdown-box select {