Free space on the top menu, as it removed? [duplicate]

StackOverflow https://stackoverflow.com//questions/21068277

  •  26-12-2019
  •  | 
  •  

Question

In the top menu "My quotes ..." on all sides is displayed free space as its clean and completely fill the entire top?

HTML

        <ul class="topPanel">
        <li><h2>My Quotes</h2></li>
        <li><h2>LOGIN WITH 
          <a href="#" class="underline">EMAIL</a> 
          OR 
          <a href="#" class="underline">TWITTER</a>
          </h2>
      </li>
    </ul>

CSS

    <!-- /*Main settings, background*/ -->
html {
    background: url(http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/Rainbow-lanscape-nature-scenery-images-new-desktop-hd-wallpapers-landscape-widescreen.jpg) no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
 }
<!-- /*top panel contains a name for the project from the left side and the 
ability to login via twitter and email*/ -->
.topPanel {
    list-style: none;
    margin: 0;

    color: #ffffff;
    background: #000000;

    padding:0px;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    justify-content: space-between;
}
    .topPanel li {
        margin: auto;
    }
        .topPanel li h2 {
            padding: 0 10px;
            margin: 3px;
            text-align: center;
        }
        /*Change the color of links when you hover*/
        .underline {
            color: #ffffff;
            text-decoration: underline;

            transition:color 1s;
            -webkit-transition:color 1s; 
        }
            .underline:hover {
                color: #eb005f;
            }
@media all and (max-width: 800px) {
    .topPanel {
        justify-content: space-around;
    }
}
@media (max-width: 600px) {
    .topPanel {
        -webkit-flex-flow: column wrap;
    }
}

Margin: 0 does not work. I noticed that sometimes the space is not shown that it can be?

Tested in Chrome and Firefox, the same situation with incorrect display. Visually, you can see here.

Was it helpful?

Solution

You need to reset the default body margin and padding

body
{
  margin:0;
  padding:0;
}

Demo

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top