I have a simple layout on html styled by css. in the middle of the page I have a . for some reason its not expanding and taking up the entire width of the screen as expected.
I've tried adding .container{width: 100%} to my CSS files but it doesn't change anything. I think it's caused by being restricted within a parent container? but I can't find a parent container either.
upon removing the .container from my CSS file, it covers the entire width as I want it to, but doing so removes the original flex arrangement that I want.
this is my css file
* { 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 */}this is my html file
{% extends "public/templates/public_template.html" %}{% block title %}Main Interface{% endblock %}{% block extra_styles %}<link rel="stylesheet" href="{{ url_for('static', filename='css/main_interface_style.css') }}"> <!-- Specific styles for main_interface -->{% endblock %}{% block main %}<div class="container"><div class="section">Header</div><div class="section"><div class="container_dropdowns mt-5"><form class="needs-validation" novalidate><div class="dropdown mb-3"> <!-- Added margin-bottom for spacing --><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> dropdown1</button><div class="dropdown-menu" id="dropdown-list"><li>Loading...</li> <!-- Placeholder until data loads, will be replaced with checkboxes--></div></div><div class="dropdown mb-3"> <!-- Added margin-bottom for spacing --><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> dropdown2</button><div class="dropdown-menu" id="dropdown-list2"><li>Loading...</li> <!-- Placeholder until data loads, will be replaced with checkboxes--></div></div><div class="dropdown mb-3"> <!-- Added margin-bottom for spacing --><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> dropdown3</button><div class="dropdown-menu" id="dropdown-list3"><li>Loading...</li> <!-- Placeholder until data loads, will be replaced with checkboxes --></div></div> <div class="dropdown mb-3"> <!-- Added margin-bottom for spacing --><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Conditions</button><div class="dropdown-menu" id="filter-conditions"><li>Loading...</li> <!-- Placeholder until data loads--></div></div><div class="dropdown mb-3"> <!-- Added margin-bottom for spacing --><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Adjust Date range here</button><div class="dropdown-menu"><div class="form-group form-check-inline"><label for="from-Date">From:</label><input type="date" class="form-control" id="fromDate" required></div><div class="form-group form-check-inline"><label for="to-Date">To:</label><input type="date" class="form-control" id="toDate" required></div><div class="invalid-feedback">Please provide valid dates on both for both entries</div></div></div> <div class="dropdown mb-3"> <!-- Added margin-bottom for spacing --><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> No.of rows </button><div class="dropdown-menu" ><div class="form-group"><label for="no_of_rows_input">Enter a Number:</label><input type="number" class="form-control" id="no_of_rows_input" placeholder="Enter a number"></div></div></div><div class="dropdown mb-3"> <!-- Added margin-bottom for spacing --><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Sort direction</button><div class="dropdown-menu"><div class="form-group"><input type="text" class="form-control" id="column_name_sorting" placeholder="Enter column name"></div><div class="form-check"><input class="form-check-input" type="radio" name="orderbyRadios" id="ASCcheck" value="ASC" checked><label class="form-check-label" for="ASCcheck">Ascending</label></div><div class="form-check"><input class="form-check-input" type="radio" name="orderbyRadios" id="DSCcheck" value="DESC"><label class="form-check-label" for="DSCcheck">Descending</label></div> </div></div> <button class="btn btn-primary btn-warning mb-2" id="confirmButton" type="submit">Confirm Filters</button><p id="dateErrorText" class="text-danger mt-2" style="display: none;">⚠ Please recheck your inputs</p></form></div></div><!----><div class="section" id="content-section">Content</div><div class="section"></div></div>{% endblock %}{% block script %}{% endblock %}