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

What is the best location to insert the code for toggling the text on a button?

I'm looking to update the button text upon clicking. When the button is clicked, the icon changes accordingly. I want the text to change from "Add to list" to "Added to list". I attempted to implement this functionality with some code, but I'm un ...

In what ways can the accessibility of a website be impacted by using CSS

After reading numerous articles on Google and Stack Overflow, I have decided to ask my question straightforwardly in the hopes of receiving a clear and direct answer. Adding another layer to the discussion about whether Does opacity:0 have exactly the sam ...

Why does it seem like only one div is being added?

I am facing an issue with dynamically appending multiple div elements. Despite my efforts, only one div element is showing up on the browser when I try to test the code. I have searched for similar problems but could not find any solutions. Any assistanc ...

What are the best practices for integrating PrimeVue with CustomElements?

Recently, I decided to incorporate PrimeVue and PrimeFlex into my Vue 3 custom Element. To achieve this, I created a Component using the .ce.vue extension for the sfc mode and utilized defineCustomElement along with customElements.define to compile it as a ...

Creating a website layout with two evenly sized columns, one of which can be scrolled through

I am facing a challenge with my HTML table that has one row and two columns. I want the two columns to have equal height, but achieving this has proven difficult using floats or flexbox. Therefore, I turned to using a HTML-table. The content in the left c ...

My attempt to use the Redux method for displaying data in my testing environment has not yielded

I've been attempting to showcase the data in a Redux-friendly manner. When the advanced sports search button is clicked, a drawer opens up that should display historical data when the search attributes are selected. For this purpose, I implemented the ...

Conceal the <p> element when the user interacts with the internal href

After creating this document using JQuery, whenever the user clicks on different internal links, a div with id = "change" is loaded which effectively "erases" the content. My challenge at the moment is that while images are successfully deleted, text rema ...

EJS file not displaying stylesheets and images correctly during rendering

I'm currently in the process of building a website, but when I try to render an ejs file (index.ejs), only the HTML portion is displayed without showing any stylesheets, fonts, or images. Here is the code snippet for linking the stylesheets: <!D ...

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry: jQuery check if image is loaded I find myself in a scenario where the following HTML structure is utilized: <div class="image"> <img class="" src="content-images/1.jpg"> <span class="slide" rel="content-images/ ...

Ways to display dynamic content within a div using Bootstrap's vertical tab through a click event in PHP

I have been working on displaying static content in a div using Bootstrap vertical tabs, similar to this: Link: However, I am facing an issue with showing dynamic content in a div using a Bootstrap vertical tab through a PHP click event. I have been try ...

Tips for calculating the canvas-relative mouse position on a CSS 3D transformed canvas

Recently decided to challenge myself by experimenting with drawing on 3D transformed canvases. After some trial and error, I managed to get it partially working. const m4 = twgl.m4; [...document.querySelectorAll('canvas')].forEach((canvas) =& ...

Angular Material Toolbar Experiencing Color Distortion

To see the issue in action, check out this CodePen: An ongoing problem I've encountered with Angular Material involves distorted colors on the toolbar. The edges of the toolbar display one shade of green, while the middle shows a different shade. Tak ...

Can I use a custom font in an HTML5 canvas?

Has anyone had success importing a custom font for use in HTML5 canvas? I've been trying to do this by loading the font file on my computer, but all my attempts have failed so far. The canvas keeps showing the default font instead of the one I want to ...

Switching the vertical alignment of grid items in Material UI when the page is collapsed

When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page ...

The seamless flow of web design

Seeking guidance on creating a responsive web page. I have a functional website that looks great on my 13" MacBook, but encounters distortion at different screen sizes. What steps are necessary to ensure it appears crisp and appealing on any device? Should ...

Vue.js - Problem with loading image on screen

Although I have experience with React, I am currently facing the challenge of using Vue for a code assessment for the first time. My struggle lies in creating a reusable image component with WAI-ARIA accessibility. Despite my efforts, I cannot get the imag ...

Exploring the process of retrieving outcomes from Node.js within a Knockout ObservableArray

Below is the Node.js code snippet I have: var http = require('http'); var port = process.env.port || 1337; var MovieDB = require('moviedb')('API KEY'); MovieDB.searchMovie({ query: 'Alien' }, function (err, res) { ...

I desire a smooth fade-in transition for the background image when the addClass function is

If the background color is set to header-fixed-position, the color will fade in. However, if the background is an image, the image will not fade in. Apologies for my lack of proficiency in English. Please refer to the sample code below. Try removing the c ...

How can I protect a text or script file from being accessed or downloaded by entering its URL directly into the browser address bar?

While working on my JSP file, I have incorporated some Java-script code but to safeguard it from being visible to clients, I decided to store it in a separate codescript.js file and load it using ajax like so: $.ajax({ cache: true, dataType: "script ...

Implement Infinite Scrolling Pagination in WordPress

I'm completely new to Wordpress and currently utilizing the FoundationPress theme. My goal is to include a button that users can click on to load more posts. Essentially, I want users to see four blog posts initially and then be able to load the next ...