CODEWITHSUNDEEP
htmlcss
kensington
kensington

Reputation: 27

Issue with white space

I have no idea why there is this white space between Contact and the data under it. I tried 0px margin everywhere but the white space is still there. Any idea how to solve?

CSS: http://pasted.co/7d58de85

Thanks

a screenshot of the part I am reffering to

    <header>
        <section id="logo">
            <img src="logo2.png" id="logoimg" alt="logo">
        </section>
        <nav>
            <ul>
                <a href="#top"><li>Home</li></a>
                <a href="#Agenda"><li>About Me</li></a>
                <a href="#HetTheater"><li>Projects</li></a>
                <a href="#edge2"><li>Contact</li></a>
            </ul>
        </nav>
        <footer>
        <p id="contactgegevens">
           xxxxxx xxxxxxx 
           [email protected]
           tel: xx xxxxxxxx
         </p>
        </footer>

    </header>

Upvotes: 0

Views: 66

Answers (2)

Žarko Selak
Žarko Selak

Reputation: 1131

Because you have fix height on header and header has border.

header{
  height: auto;
    width:230px;
    border-right:1px solid black;
    position:fixed;
    text-align:center;
    font-family: 'Roboto', sans-serif;
}

DEMO: https://jsfiddle.net/znr1n39s/

Upvotes: 0

trinaldi
trinaldi

Reputation: 2950

You're defining a height (60vh) to your nav and that's causing the issue.

Removing it, causes the height to be auto, and the white space disappears

nav{
    margin:0px;
    width:230px;
    min-width:150px;
}

Here's a Codepen.

The defined height was also causing some responsive issues.

Upvotes: 1

Related Questions