Freier Speicherplatz im oberen Menü, wie entfernt?[Duplikat]

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

  •  26-12-2019
  •  | 
  •  

Frage

Im oberen Menü „Meine Zitate ...“ wird auf allen Seiten freier Speicherplatz angezeigt, wie sauber ist er und füllt die gesamte Oberseite vollständig aus?

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 funktioniert nicht.Mir ist aufgefallen, dass manchmal der Platz nicht angezeigt wird, dass es sein kann?

Getestet in Chrome und Firefox, die gleiche Situation mit falscher Anzeige. Optisch können Sie es hier sehen.

War es hilfreich?

Lösung

Sie müssen die Standardeinstellung zurücksetzen body Rand und Polsterung

body
{
  margin:0;
  padding:0;
}

Demo

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top