Utilizing Bootstrap to practice coding as a beginner has been a learning process for me.
Recently, I encountered an issue with the container size of the footer.
Upon inspecting the photo in the link, I realized that the footer size I initially envisioned was intended to occupy the entire width of the screen and be wider than it currently appears.
I believe the footer width has been constrained due to the customized sizing of the upper Carousel section. The upper section (Carousel) seems to be automatically influencing the container size of the footer based on its own dimensions, which is not the desired outcome.
How can I prevent the upper section's container size from impacting the size of the footer?
The original code:
<style>
.brand-logo {
height: 50px;
padding: 0;
margin-bottom: 6px;
}
.feature-icon img {
width: 4rem;
height: 4rem;
border-radius: .75rem;
}
.divider {
border-top: 1px solid #ccc;
margin-top: 30px;
margin-bottom: 30px;
}
#carouselExampleCaptions {
max-width: 800px; /* Set the maximum width of the carousel */
margin: 0 auto; /* Center the carousel horizontally */
}
.carousel-inner {
max-height: 700px; /* Set the maximum height of the carousel */
}
img {
object-fit: cover;
}
</style>
</head>
<body>
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">I have experimented with different syntax such as max-width, container-fluid, and more in an attempt to resolve the issue, but unfortunately, none of the approaches have yielded positive results.