CODEWITHSUNDEEP
htmlcss
UselessGiraffe
UselessGiraffe

Reputation: 97

unable to resolve html tag creating white space at top of page

As the title states, I am unable to rid the white space from the top and bottom of my webpage. I have tried to alter my code for quite a few hours, and have not been able to resolve this issue. I would sincerely appreciate any help at all that you can offer (I am new to web design, and this is one of my first projects, so please be kind :).

Upon inspection in the developer tools, the html tag is what is causing this space (specifically HTML element.style).

I realize this question has been asked ALOT. However, I have read about 20 related pages or so on here and tried the answers therein to resolve the issue, all to no avail.

Things I have tried to remove the space:

I am using a normalize stylesheet (does not correct the problem).

Changing the HTML overflow to hidden and height/margin to 0 in the CSS.

Adding overflow auto or hidden to the universal selector rules in the CSS.

Please let me know if there is anything else that you can think of that I should try. I sincerely appreciate your time^^

HTML: 

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>shaun's portfolio</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="page-wrapper">
            <!--[if lt IE 7]>
                <p class="browse">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
            <div class="header-wrapper">
                <header>
                    <nav>
                        <div class="header-row-1">
                        <p id="title">Shaun</p>
                        <ul>
                            <li><h2><a href="#">Home</a></h2></li>
                            <li><h2><a href="#portfolio">Portfolio</a></h2></li>
                            <li><h2><a href="#contact">Contact</a></h2></li>
                        </ul>
                        </div>
                        <div class="header-row-2">
                            <img id="main-pic" src="responsive-layout-profile.png" alt="">
                            <h2 id="main-topic">Hello! My name is Shaun. I am a Front-End Developer who loves all things design.  
                                I am currently finishing my degree in Front-End Web Development at TreeHouse.  I am excited to 
                            show the world what I can do!</h2>
                        </div>
                    </nav>
                </header>
            </div>
            <!-- Header Div -->
            <div class="main-wrapper">
                <h3 id="portfolio">PORTFOLIO</h3>
                <img src="portfolio-1.png" alt="Marketing site project portfolio image">
                <p>This project shows the front page of a marketing website that I created for a local business.</p>

                <img src="portfolio-2.png" alt="Search project portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>

                <img src="portfolio-3.png" alt="Travel App portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>

                <img src="portfolio-4.png" alt="GPS map project portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>

                <img src="portfolio-5.png" alt="Photo gallery project portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>

                <img src="portfolio-6.png" alt="Calculator project portfolio image">
                <p>This project shows a search search engine that I created which looks through a customer database 
                    and displays specific user query information.</p>
            </div>

            <footer>
                <h3 id="contact">CONTACT</h3>
                <p>Please get a hold of me at the information below: </p>
                <p>Phone: <strong>+1(333)555-8989</strong></p>
                <a id="email" href="mailto: [email protected]">Email: <strong>[email protected]</strong></a>
                <hr>

                <div class="contact-info">
                    <h3>Shaun</h3>
                    <h3><a href="#">BACK TO TOP</a></h3>
                </div>
            </footer>
        </div>
         <!-- Page-Wrapper Div -->
    </body>
</html>

CSS:

* {  
    box-sizing: border-box;
}

/* Web Fonts ------*/

@font-face {
    font-family: 'BoxedSemibold';
    src: url('bBoxedSemibold.eot');
    src: url('BoxedSemibold.eot?#iefix') format('embedded-opentype'),
    url('BoxedSemibold.woff') format('woff'),
    url('BoxedSemibold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BoxedThin';
    src: url('boxedThin.eot');
    src: url('boxedThin.eot?#iefix') format('embedded-opentype'),
    url('boxedThin.woff') format('woff'),
    url('boxedThin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face { 
    font-family: 'BoxedLight';
    src: url('BoxedLight.eot');
    src: url('BoxedLight.eot?#iefix') format('embedded-opentype'),
    url('BoxedLight.woff') format('woff'),
    url('BoxedLight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Basic Styles ------*/

body {
    margin: 0 auto;
    min-width: 320px;
}

h1,
li {
    font-family: "BoxedThin";

}

h2 {
    font-family: "BoxedLight" ;
    color: #646464;
    text-align: center;
}



/* link Styles ------*/

nav a {
    padding: 30px;
}

li {
    flex-direction: column;
    list-style-type: none;
}

a:link, a:visited {
    background-color: #ffffff;
    color: rgb(75, 75, 75);
    text-align: center;
    text-decoration: none;
}

a:hover, a:active {
    color: rgb(0, 204, 255 );
}

p {
    font-size: 18pt;
}

#portfolio,
#contact {
    text-align: center;
    font-family: "BoxedSemibold";
    font-size: 18pt;
    width: 100%;
}

/* Header Styles ------*/

.header-row-1 {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.header-row-2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;

}

#title {
    display: flex;
    justify-content: center;
    margin: 40px 0;
    font-family: "BoxedSemibold";
    font-size: 28pt;
    height: 40px;
    width: 100%;
}

header {
    width: 100vw;
    margin-top: 40px;
}

#main-pic {
    display: flex;
    margin: 0 auto;
}

#main-topic {
    display: flex;
    width: 80%;
    margin: 0 auto;
}

/* Navigation ------*/


nav {
    display: flex;
    flex-direction: column;
    background-color: #f5f4f4;
}

nav h2 {
    width: 90%;
}


ul {
    display: flex;
    flex-direction: column;
    width: 90vw;
    margin: 0 auto;
    padding: 0;
}

ul a{
    justify-content: center;
    display: flex;
    margin: 10px 0;
}

ul h2 {
    margin: 0 auto;
}

li {
background-color: #ffffff;
margin: 5px;
}


/* Body ------*/

.main-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #ffffff;
    width: 87vw;
    margin: 0 auto;
    text-align: center;
}

.main-wrapper p {
    width: 100vw;
    font-family: "BoxedLight" ;
    color: #646464;
}

.main-wrapper img {
    width: 80%;
    flex: 1;   
    padding: 10px;
    margin: 10px;
    justify-content: center;
}

/* Footer ------*/

footer {
    text-align: center;
    margin: 0 auto;
    background-color: #e7e3e3;
    width: 100vw;
    padding-top: 10px;
    font-family: "BoxedLight";
}

footer p {
    width: 90%;
    margin: 20px auto;
}

#email {
    background-color: #e7e3e3;
    font-family: "BoxedLight";
    font-size: 18pt;
    color: rgb(0, 0, 0);
}

hr {
    height: 4px;
    width: 80%;
}

.contact-info {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    margin: 0 30px 5px 30px;
}

.contact-info a{
    background-color: #e7e3e3;
}

Upvotes: 0

Views: 50

Answers (1)

Ilyass Trh
Ilyass Trh

Reputation: 28

To fix this problem you can add this line to your css code

{ margin: 0 !important; }

Upvotes: 1

Related Questions