What could be causing my HTML footer to not grow from its borders?

Hello there, I need assistance with an HTML document I am working on. Can you explain why my footer is not expanding to the edges even though I have set the width to 100%? Please help. Please note that the code provided is incomplete, and for the full context, please click on the link below.

enter code <footer class="footer-distributed">

        <div class="footer-left">
      <img src="https://i.pinimg.com/originals/b7/b3/96/b7b396047648c1baa436937d0afdfa76.jpg">
            <h3>About <span>just do it</span></h3>

            <p class="footer-links">
                <a href="#">Home</a>
                |
                <a href="#">Blog</a>
                |
                <a href="#">About</a>
                |
                <a href="#">Contact</a>
            </p>
    <hr>

            <p class="footer-company-name">
      copyright © 2021 kaustubh krishna</p>
        </div>

        <div class="footer-center">
            <div>
                <i class="fa fa-map-marker"></i>
                  <p><span>find about us at our social media</p>
            
            <div>
                <i class="fa fa-envelope"></i>
                <p><a href="#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f3c3a3f3f203d3b0f253a3c3b2b20263b612c2022">[email protected]</a></a></p>
            </div>
        </div>
        <div class="footer-right">
            <p class="footer-company-about">
                <span>About the company
                We offer freelance services for you and your company </p>
            </div>
    <div class="footer-icons">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-instagram"></i></a>
                <a href="#"><i class="fa fa-linkedin"></i></a>
                <a href="#"><i class="fa fa-youtube"></i></a>
            </div> here

For more information and the complete code, please visit: https://codepen.io/kaustubh0711/pen/XWNdNrv?editors=1100

htmlcss

Answer №1

To ensure your .small-container div fills the entire width of the screen, consider adjusting its max-width css style. Additionally, removing the left and right padding will help eliminate gaps on either side of your footer.

Answer №2

Make sure to properly close the .small-container and .row elements as they have an impact on the footer.

<div class="small-container">
  <div class="row">
    ... add your content here ...       
  </div>
</div>
<!-----end of footer---->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring ways to repeatedly collapse rows using HTML, CSS, and JavaScript

GOAL: I want to freeze the header, freeze the first column, and be able to collapse rows multiple times. CURRENT PROGRESS: I have achieved freezing the header, first column, but can only collapse rows once. MY CODE SNIPPET: </head> <body> &l ...

javascripthtmlcss

Tips for effectively closing div elements

How can I modify this accordion to close when a user clicks on another link, and also change the image of the open "p" tag? Currently, clicking on a link toggles the content and changes the image. However, what I am struggling with is closing the previousl ...

javascriptjqueryhtmlcss

Tips for Styling "Opened" Elements within the <Summary><Details> Web Design in HTML using CSS? (a color coding challenge)

I've dedicated a significant amount of time crafting my ultimate HTML FAQ with detailed summaries styled in CSS. There's one aspect that continues to elude me - achieving the perfect orange background color for expanded topics: My goal is for a ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

Transfer data dynamically between JSP pages using parameters

In my Java application, users can log in and predict football matches. I have created an admin JSP page where I retrieve all team names from a database table to set up this week's matches. Later, after the matches finish, I set the final results to co ...

javahtmljspservletsjstl

Implementing a stylish gradient background with HTML 5 progress bar tag

I am trying to customize an HTML5 progress bar tag in a unique way: The background of the bar should have a gradient with a fixed width of 100%, but I want the gradient to only be visible where the value of the bar is... progress[value]::-webkit-progres ...

csshtmlstylesprogress-barlinear-gradients

Incorporate JavaScript functionality with HTML dropdown lists

I am attempting to achieve the following: The user can choose between "Option One" or "Option Two". If they select "Option One", the result will be 66 + 45, and if they select "Option Two", the result will be 35 + 45. How can I make this work using a com ...

javascripthtml

What is the best way to create a sticky menu bar?

I have this code snippet at the beginning of my website: <body> <div class="agile-main"> <div class="menu-wrap" id="style-1"> <nav class="top-nav"> <ul class="icon-list"> ...

jqueryhtmlcssmenu

Interactive Dropdown-Buttons dynamically inserted

I have been utilizing a third-party library called Materializecss from this link: My issue arises when attempting to create a Dropdown feature upon clicking a button. It works perfectly fine when I manually place the button in the HTML and click on it, tr ...

jqueryhtmlmaterialize

Retrieve the value of an AngularJS expression and display it in a window alert using AngularJS

Hey there, I am in the process of trying to display the value of an expression using AngularJs As a beginner in angular, I am working on figuring out how to retrieve the value of the expression either with an alert or in the console. I'm utilizing A ...

javascriptangularjsjsonhtml

Navigating through drop-down menus using jQuery

I need help with a JavaScript script that can calculate the total number of points based on selected checkboxes and dropdown values. Currently, my script is able to iterate through checkboxes and assign 1 or 2 points based on their classes, but I'm st ...

javascriptjqueryhtmljquery-selectbox

Changing a URL parameter based on the element's width is a simple task when

I'm trying to display elements on a page by replacing a string in the URL parameter with the width of each element of a certain class. I'm new to JavaScript, so any help would be appreciated! Here's an example of the HTML for objects on the ...

javascriptjqueryhtmlcss

HTML image identifier and canvas elements

Greetings! I have a question that I've been struggling to find an answer for on Google. I'm attempting to draw an image on a canvas and initially used the "new" constructor ( ballPic = new Image(); ballPic.src = "ball.png" ) which worked fine. Ho ...

javascripthtml

Tips for accessing the HTML content enclosed within a specific HTML tag using Python with Selenium

I am trying to extract the source code of an HTML document that is embedded within an <iframe> tag generated by JavaScript. The HTML contents within this <iframe> tag appears as #document, which expands to reveal a full HTML document starting w ...

javascriptpythonhtmlseleniumbeautifulsoup

Eliminate Video Time Indicator

Can the video progress bar be removed from this specific video player? I would like it to be integrated into the embed code that I share with others. <iframe id="hapyak-player-157199-8825" marginwidth="0" marginheight="0" frameborder="no" scrolling=" ...

javascripthtmliframe

Custom CSS file for individual tenants in the Twig main template

Our Symfony 2.4 application is a multi-tenant system, meaning we share the same codebase among several organizations and differentiate access by domain name. For example: organization1.domain.com organization2.domain.com organization3.domain.com We util ...

phpcsssymfonyassetic

The H1 tag is mysteriously displaying padding or margin on the bottom, despite not being set

Despite not setting any padding or margin for the H1 tag, it still appears to have some spacing at the bottom. After applying a margin and padding of 0 to both the h1 tag and the text below it, I am still facing an issue where the text doesn't align ...

htmlcss

The html function does not contain the value of the textarea

While attempting to retrieve the HTML content of a div using the code below, I noticed that it does not include the text entered in the textarea or input field. var mywindow = $(printDiv).html(); The variable mywindow will contain all the HTML except fo ...

javascriptjqueryhtml

Is there a way to create a shadow effect using css?

I am attempting to replicate the subtle shadow effect displayed in the image. https://i.sstatic.net/fa7iB.png https://i.sstatic.net/YgY0W.png Struggling with implementing this shadow effect using CSS. I experimented with box-shadow: box-shadow: 0 3px 6p ...

htmlcss

Tips on increasing the button size automatically as the elements inside the button grow in size

I have a button with an image and text inside, styled using CSS properties to achieve a specific look. However, I encountered an issue where the text overflows outside of the button when it's too long. I want to find a way to wrap the text inside the ...

htmlcss

The Bootstrap Hugo Documentation website is experiencing difficulties and displaying the error message "failure to render 'page'"

Currently, I have bootstraps' source code downloaded on my Mac along with all the necessary node packages installed. Upon attempting to run hugo --cleanDestinationDir --printUnusedTemplates (hugo is properly installed), I encountered the following err ...

htmlmacosterminalbootstrap-5hugo