What steps should I take to eliminate the white gap between the paragraph and the footer on my webpage?

If you're new to html and css, feel free to check out the url [file:///Users/CatherineDu/百度云同步盘/practice/about.html]. I'm currently working on building a simple website and facing an issue - there are unwanted white spaces between the end of my paragraphs and the footer, measuring around 2cm wide. I've tried adjusting the margins and setting margin-bottom to zero, but nothing seems to fix the problem.

<!DOCTYPE html>
    <hmtl>
        <head>
            <meta charset="utf-8">
            <title> The Tailory New York </title>
            <link rel="stylesheet" href="css/normalize.css">
            <link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
            <link rel="stylesheet" href="css/main.css">
        </head>   
        <body>
            <header>
               <div id="logo">
                   <a href="index.html">
                       <img src="img/logo_The Tailory New York_black.png" alt="">
                   </a>
               </div>
                <nav> 
                    <ul>
                        <li> <a href="home.html">Home </a> </li>
                        <li> <a href="app.html">Appointment </a> </li>
                        <li> <a href="gallery.html">Gallery </a></li>
                        <li> <a href="about.html"class="selected">About</a></li>
                        <li> <a href="contact.html">Contact </a></li>
                    </ul>
                </nav> 
            </header>
                    <section>
                    <img src="img/profile.jpg" alt="" class="profile_photo">
                    <div class="profile">
                    <h1>ABOUT</h1>
                            <h2>The Brand</h2>
                                <p>
                                    The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
                                </p>
                            <h2>The Concept </h2>
                                <p>
                                    Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
                                </p>
                            <h2>A Note From the Founder</h2>
                                <p>
                                    The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
                                    My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
                                    At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
                                    <br> </br>
                                    Sincerely,</br>
                                    Shao Yang, Founder 
                                    <br> </br>
                                </p> 
                                </div>

                    </section>          
                </body>

                <div id="social_media">
                    <footer>
                        <a href="https://www.facebook.com/thetailorynewyork"> <img src="img/facebook.jpg" alt="Facebook logo" class="social-icon"> </a>
                        <a href="https://www.twitter.com/thetailorynewyork"> <img src="img/twitter.png" alt="Twitter logo"class="social-icon"></a>
                        <a href="https://www.instagram.com/thetailorynyc"> <img src="img/instagram.jpeg" alt="Instagram logo"class="social-icon"> </a> </br>
                        &copy; 2017 The Tailory New York All Rights Reserved 
                    </footer>
            </div>


    /****************************************
    GENERAL
    *****************************************/
    a {
        text-decoration: none;
    }

    img{
        max-width: 100%;
    }




    /****************************************
        BACKGROUND ANIMATION
    ****************************************/
    section ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #selector{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    /***************************************
    HEADER
    ***************************************/


    /* header black*/
    header{
        background: black;
    }


    /* black header using the Tailory's logo*/
    #logo{
        text-align:center;
        margin: 0;
        padding: 0 5%
    }


    /* nav links black */
    nav{
        background: black;
    }

    nav ul{
        list-style: none;
        margin: 0 10px;
        padding: 0;
        text-align: center;
    }

    nav li{
        display: inline-block; 
    }

    /* nav link and visited link white*/
    nav a{
        font-weight: 800;
        padding: 15px 10px;
        color: white;
        font-family: 'Crimson Text', sans-serif;
        font-size: 1.25m;
    }
    nav a:link{
        color: white;
    }
    nav a:visited{
        color: grey;
    }

/*************************************** FOOTER ***************************************/

    footer{
        font-size: 1em;
        text-align: center;
        clear: both;
        padding: 50px 50px;
        color: white;
        background-color: grey;
        overflow: hidden;
    }

    .social-icon{
        width: 20px;
        height: 20px;
        margin: 0 5px;
    }
    /***************************************
    PAGE: ABOUT
    ***************************************/
    h1{
        margin: 0 0 1.5em 0;
        font-family: 'Rakkas','sans-serif';
        font-weight: 500;
    }

    h2{
        margin: 0 0 1.2em 0;
        font-family: 'Rakkas', 'sans-serif';
        font-weight: normal;
    }

    .profile{
        color: grey;
        background-color: black;
        margin-bottom: 0;
        padding: 0;
    }

    .profile_photo{
        display: block;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

Answer №1

#content should be placed within <body>, as all HTML content needs to be contained inside the <body></body> tags.

To fix the issue of extra space at the bottom of the last paragraph in your .bio section, you can simply remove the margin using the following CSS code.

.bio p:last-child {
  margin-bottom: 0;
}

For a visual demonstration, check out this link: http://codepen.io/anon/pen/LxEbWv

Answer №2

Include the following in your #online_presence :

padding-bottom: 30px;

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

I am seeking guidance on extracting specific data from a JSON file and presenting it in an HTML table using jQuery

I am currently working on extracting specific elements from a JSON file and displaying them in an HTML table. I have successfully retrieved the data from the JSON file, stored it in an array, and then dynamically created an HTML table to display the conten ...

Submenu animation that "bursts onto the scene"

I'm facing an issue with my menu that has sub-items inside it. To achieve the animation effect I desire, I need to extract the width, height, and first-child's height of the sub-menu. While my animation is working most times, there are instances ...

Can Javascript be used to open a new window, send POST parameters to it, and pass the request as application/json?

I have a browser client application built with JavaScript that manages a large amount of state data. Sometimes, this data needs to be organized into a structured object and sent to a new window for further processing. Currently, I am using a solution wher ...

Generating a clickable link from information pulled from a database and utilizing the get() method

Currently experimenting with a form I created and everything is functioning smoothly. My current objective involves retrieving specific rows from my database and presenting them as a summary on a separate page. However, I want these rows to appear as hyper ...

How to animate a left border shifting to the center using JavaScript

As I'm modifying my current div, I need to add a vertical line in the center of it. I've come across various solutions where a left border is added and then shifted using the left property by 50% (which effectively places it in the middle). Here ...

How to correctly position a modal in a React application using CSS

Currently, I am working on integrating the react-modal NPM library into a React Typescript project. The issue I am facing is that the modal occupies the entire width of the screen by default, with padding included. My goal is to have it display as a small ...

Tips on making a dropdown select menu expand in a downward direction

I'm currently using a select element to choose options from a dropdown list, but because of the large number of items, the list displays in an upward direction instead of downwards. I am working with Bootstrap. I have reviewed other code samples with ...

Ways to ensure CSS affects icon inside main element?

Struggling to match the background color of Material-UI icons with the rest of the list items on hover. The CSS is not applying to both the icon and text despite styling the overall class (className= "dd-content-item"). Any assistance would be greatly appr ...

Pictures failing to load on both Chrome and Safari browsers

For some reason, the images on my app are not appearing in Chrome and Safari but show up fine in Firefox. If you try to open the image URL in a browser, it works perfectly. However, when embedded in the HTML document, the image appears broken. I also test ...

Exploring jQuery's selection techniques involving filtering and excluding elements

How can I select all elements with the class .Tag that are not equal to the element passed to the function? Here is my current attempt: $("a.tag").filter(":visible").not("\"[id='" + aTagID + "']\"").each( function place(index, ele ...

The moving div suddenly halts before continuing its journey

Two overlapping divs create an interesting sliding effect. A gray div slides in from the top over a black div. Hovering your mouse over the black div causes the gray one to slide out of view. If you hover over the gray div, it also slides out but pauses ...

What is the best way to address a row of hyperlink text located at the top of a webpage?

I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...

The font-size transition using CSS3 is experiencing a lack of smoothness specifically in the

I have crafted a simple animation for an h1 element, utilizing css3 and a transition on the font-size. Here is the link to view: http://jsbin.com/oPIQoyoT/1/edit h1 { position: relative; width:500px; height: 500px; font-size: 3em; tra ...

Utilizing ng-click within ng-repeat along with $index

I'm experimenting with using ng-click on a div that is part of an ng-repeat loop, utilizing $index as seen in the code below : HTML: <div class="elementContainer" ng-repeat="element in elements" ng-click="elementUrl($index)"> <h2>{{ ...

Using CSS Clip Path to conceal elements

My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues. I initially positioned the top so that they touch perfectly and nothing interferes with the angled ...

Transferring data from PHP to an HTML function

I have attempted to retrieve the coordinates generated by the geocode and passed them to the function initialize in order to display a map with the location. Despite transferring the variables from PHP to the function initialize(), it seems that the lati ...

The element's position remains unchanged after the .click re-event in the function

Welcome to my first attempt at using jQuery! Please bear with me as I navigate through this learning process. Here's the challenge: I have a series of elements in my HTML. <div class="garden"> <div class="point left">&#9668;</d ...

Positioning of buttons in Bootstrap 5 tables

I am working on a table that represents a CRUD application with details of a person and edit/delete buttons. The goal is to have these buttons displayed side by side, even on smaller screen sizes where they currently stack on top of each other. How can I ...

Choosing more than one item to submit may pose an issue - the POST request will be empty

One of the challenges I'm facing is with a multiple select feature like the one below: This allows for selecting various options, such as 3 sports in this case. Successful form submission occurs when items are selected correctly. However, if no spor ...

Utilizing Bootstrap in Laravel to align the heights of rows in adjacent columns

I am in the process of developing a calendar application that includes a header row and a header column. The layout displays six days in columns with a fixed number of time periods per day. <div class="row"> <div class="col-md c ...