Div не расширяется до полной ширины просмотра ⇐ Html

[Anonymous]

У меня есть простой макет на HTML -стилизовании CSS. В середине страницы у меня есть. По какой -то причине он не расширяется и не поднимает всю ширину экрана, как и ожидалось. t изменить что -нибудь. Я думаю, что это вызвано ограничением в родительском контейнере? но я тоже не могу найти родительский контейнер. Расположение, которое я хочу. < /p>
Это мой файл CSS < /p>
* {
box-sizing: border-box; /* Ensures padding and borders are included in width/height */
margin: 0; /* Resets default margin */
padding: 0; /* Resets default padding */
}

body {
font-family: Arial, sans-serif; /* Sets a default font */
background-color: #f0f0f0; /* Light gray background for the body */
min-height: 100vh; /* Ensures the body takes at least the full height of the viewport */
margin: 0;
}

.container {
display: flex;
gap: 2%;
flex-wrap: wrap;
align-content: start;
min-height: 100vh; /* Ensures the container takes at least the full height of the viewport */
width: 100vw;
margin-left: 0 !important;
margin-right: 0 !important;
}

.section:nth-child(1) {
width: 100%;
height: 5vh; /* Header */
background-color: #4CAF50; /* Green */
color: white; /* White text */
display: flex; /* Center text vertically */
align-items: center; /* Center text vertically */
justify-content: center; /* Center text horizontally */
}

.section:nth-child(2) {
width: 25%;
height: 85vh; /* Sidebar */
background-color: #2196F3; /* Blue */
color: white; /* White text */
display: flex; /* Use flexbox for layout */
flex-direction: column; /* Stack children vertically */
align-items: flex-start; /* Align children to the start (top) */
justify-content: flex-start; /* Align children to the start (top) */
padding: 10px; /* Optional: Add some padding */
}
.section:nth-child(3) {
flex-grow: 1;
height: 85vh; /* Content */
background-color: #FFC107; /* Yellow */
color: black; /* Black text */
display: flex; /* Center text vertically */
align-items: center; /* Center text vertically */
justify-content: center; /* Center text horizontally */
}

.section:nth-child(4) {
width: 100%;
height: 5vh; /* Footer */
background-color: #f44336; /* Red */
color: white; /* White text */
display: flex; /* Center text vertically */
align-items: center; /* Center text vertically */
justify-content: center; /* Center text horizontally */
}
.dropdown-menu {
max-height: 200px; /* Set the maximum height */
overflow-y: auto; /* Enable vertical scrolling */
}

< /code>
Это мой html -файл < /p>
{% extends "public/templates/public_template.html" %}

{% block title %}Main Interface{% endblock %}

{% block extra_styles %}
[*]
{% endblock %}

{% block main %}

Header






dropdown1


Loading...





dropdown2


[*]Loading...





dropdown3


[*]Loading...





Conditions


[*]Loading...





Adjust Date range here



From:


To:


Please provide valid dates on both for both entries





No.of rows



Enter a Number:







Sort direction







Ascending


Descending




Confirm Filters
⚠ Please recheck your inputs





Content



{% endblock %}

{% block script %}

{% endblock %}


Подробнее здесь: https://stackoverflow.com/questions/794 ... f-viewport