Wie bekomme ich die Lücke am Seitenrand weg?

Question 1

Ich habe bereits den Rahmen, die Polsterung und den Rand für den Körper und zwei meiner Divs auf 0px gesetzt. Aber ich bekomme die Lücke immer noch nicht weg.

#body{
 padding: 0px ;
 border:0px ; 
margin:0px;
width:100%;
height:100vh;
}


#mainPage {
height:100vh;
width:100%;
background-color: #2469ff;
padding: 0px;
border:0px; 
margin:0px;
}

#navBar{

height:70px; 
width:100%;
Background-color: #1f1f1f;  
padding: 0px ;
border:0px ; 
margin:0px;
}

Das ist bisher mein ganzes CSS.

Hier ist mein HTML. Es ist im Moment sehr einfach.

<html>  
     <head>    
     <title>
     Ice Arena
     </title>          
     </head>    
     <body>       
          <div id="mainPage">       
              <div id="navBar">      
              </div>  
              <div id="leftPanel">      
              </div>   
          </div>    
     </body>
</html>

Wie gesagt, ich weiß nicht, warum es das tut. Ich bin mir sicher, dass ich einen Fehler gemacht habe, ich bin immer noch ein Anfänger mit CSS und HTML.

Question 2

Verwenden Sie Folgendes, um den Standardrand zu entfernen body:

html,
body {
  margin: 0;
}

Ich empfehle Ihnen dringend, dies zu lesen:

Standard-CSS-Werte für HTML-Elemente

Standard-CSS-Werte für body [ display: block; margin: 8px;]

#body {
  padding: 0px;
  border: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}

#mainPage {
  height: 100vh;
  width: 100%;
  background-color: #2469ff;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#navBar {
  height: 70px;
  width: 100%;
  Background-color: #1f1f1f;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

html,
body {
  margin: 0;
}

<html>

<head>
  <title>
    Ice Arena
  </title>
</head>

<body>
  <div id="mainPage">
    <div id="navBar">
    </div>
    <div id="leftPanel">
    </div>
  </div>
</body>

</html>

Question 3

Fügen Sie das folgende CSS hinzu margin zurücksetzen:

html,
body {
    margin: 0;
}

Ausschnitt unten:

html,
body {
  margin: 0;
}

#body {
  padding: 0px;
  border: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}

#mainPage {
  height: 100vh;
  width: 100%;
  background-color: #2469ff;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

#navBar {
  height: 70px;
  width: 100%;
  Background-color: #1f1f1f;
  padding: 0px;
  border: 0px;
  margin: 0px;
}

<body>
  <div id="mainPage">
    <div id="navBar">
    </div>
    <div id="leftPanel">
    </div>
  </div>
</body>

Question 4

Machen Sie den Div-CSS-Parameter wie folgt:

margin: 0 auto;

Dadurch wird Ihr Rand zentriert.

Question 5

Die Lösung für dieses Problem ist sehr einfach. Entfernen Sie einfach das Hashtag (#) aus dem „Body“ wie folgt:

    body{.....}

Es besteht keine Notwendigkeit, Hashtags für eindeutige HTML-Tags zu verwenden.

Question 6

Fügen Sie das HTML- und Body-Styling hinzu.

html, body{
 padding: 0px ;
 border:0px ; 
 margin:0px;
 width:100%;
 height:100%;
}

Question 7

Entfernen Sie das # aus #body in Ihrem CSS.

Ihr CSS sollte …

body{
padding: 0px ;
border:0px ; 
margin:0px;
width:100%;
height:100vh;
}