diff --git a/frontend/css/main.css b/frontend/css/main.css
index 80fe9b7..9c1fe2f 100644
--- a/frontend/css/main.css
+++ b/frontend/css/main.css
@@ -291,10 +291,23 @@ body {
   50% { opacity: 0.4; }
 }
 
-.content {
+/* Wraps the (optional) banners strip and main content so they stack
+   vertically as a single flex column, independent from the fixed sidebar.
+   Without this wrapper, #banners and .content would be direct siblings in
+   the (row-direction) body flexbox, turning the banner into a narrow flex
+   item next to the content instead of a full-width strip above it, and
+   shifting the whole dashboard layout out of alignment with the sidebar. */
+.main-wrapper {
   margin-left: var(--sidebar-width);
-  flex: 1;
+  display: flex;
+  flex-direction: column;
   height: 100vh;
+  min-width: 0;
+}
+
+.content {
+  flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 24px 32px;
 }
@@ -1504,8 +1517,8 @@ body {
   }
   .sidebar-backdrop.open { display: block; }
   .nav-link { min-height: 44px; padding: 10px 14px; }
-  .content { margin-left: 0; padding: 16px; padding-top: 68px; }
-  #banners { margin-left: 0; }
+  .main-wrapper { margin-left: 0; }
+  .content { padding: 16px; padding-top: 68px; }
   .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
   .device-grid { grid-template-columns: 1fr; }
   .content-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
diff --git a/frontend/index.html b/frontend/index.html
index ec99fdb..3107118 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -174,11 +174,13 @@
     </div>
   </nav>
 
-  <div id="banners" style="margin-left:var(--sidebar-width)"></div>
+  <div class="main-wrapper">
+    <div id="banners"></div>
 
-  <main class="content" id="app">
-    <!-- Views rendered here -->
-  </main>
+    <main class="content" id="app">
+      <!-- Views rendered here -->
+    </main>
+  </div>
 
   <!-- Add Device Modal -->
   <div class="modal-overlay" id="addDeviceModal" style="display:none">