footer is not filling up the whole browser width-CodePudding

body{
    font-size:  16px;
    color: #fff;
    background-color: lightskyblue;
    font-family: 'Nunito', sans-serif;

}

#header-nav{
    background-color: white;
    border-radius: 0;
    border: 0;
}

#logo-img {
    background:  url('../images/logotild1.png') no-repeat;
    width: 170px;
    height: 100px;
    margin:  10px 15px 10px 0;
}

.navbar-brand {
  padding-top: 25px;
  margin-top: 25px;
}

.navbar-image, .navbar-brand{
  float: left;
}

.navbar-brand h1 { /* Restaurant name */
  font-family: 'Nunito', sans-serif;
  color: lightskyblue;
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 1px #222;
  margin-top: 0;
  margin-bottom: 0;
  line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
  text-decoration: none;
}

#nav-list {
  margin-top: 10px;
}
#nav-list a {
  color: black;
  text-align: center;
}
#nav-list a:hover {
  background: #E7E7E7;
}
#nav-list a span {
  font-size: 1.8em;
}

#navBarlist{
    font-size: 1.2em;
}

#smallpic{
    margin-top: 30px;
}

.navbar-header button.navbar-toggler, .navbar-header .navbar-toggler-icon {
    border: 1px solid lightgrey;

}
.navbar-header button.navbar-toggler{
    clear: both;
}

.panel-footer{
    position: absolute;
    margin-top: 30px;
    padding-top: 35px;
    padding-bottom: 30px;
    background-color: #222;
    border-top: 0;
    width: 100%;
}

.panel-footer div.row{
    margin-bottom: 35px;
}

#om{
    line-height: 2;
}


/* HOME PAGE */
.container .jumbotron {
  box-shadow: 0 0 50px white;
  border: 2px solid white;
}

#tøj-tile, #face-tile, #andet-tile{
    height:  250px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    position: relative;
    border:  2px solid whitesmoke;
    overflow:  hidden;
}

#tøj-tile:hover, #andet-tile:hover, #face-tile:hover{
    box-shadow:  0 1px 5px 1px black;
}

#tøj-tile{
    background: url('../images/tøjtile.png') no-repeat;
    background-position: center;
}

#andet-tile{
    background: url('../images/andettile.png') no-repeat;
    background-position: center;
}

#face-tile{
    background: url('../images/facetile.png') no-repeat;
    background-position: center;
}

#tøj-tile span, #andet-tile span, #face-tile span{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 1.6em;
    text-transform: uppercase;
    background-color: #000;
    color: #fff;
    opacity: .8;
}

/********** Large devices only **********/
@media (min-width: 1200px) {
    .container .jumbotron {
    background: url('../images/storbilledweb.jpg') no-repeat;
    height: 675px;
  }
  #tøj-tile, #andet-tile, #face-tile{
        width: 360px;
        margin: 0 auto 15px;
    }
}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  /* Header */
  /* End Header */
  .container .jumbotron {
    background: url('../images/mediumbillede.jpg') no-repeat;
    height: 558px;
  }
}

/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
    .container .jumbotron {
    background: url('../images/lillebillede.jpg') no-repeat;
    height: 432px;
  }
}

/********** Extra small devices only **********/
@media (max-width: 767px) {
    .navbar-brand{
        padding-top: 10px;
        height: 80px;
    }
    .navbar-brand h1{
        padding-top: 10px;
        font-size: 5vw;
    }

    #tøj-tile, #andet-tile, #face-tile{
        width: 360px;
        margin: 0 auto 15px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tilde & brdr</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap" rel="stylesheet">
  </head>


<body>
  <header>
    <nav id="header-nav" >
      <div >
        <div >
          <button 
             
            type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navBarlist" 
            aria-controls="navBarlist" 
            aria-expanded="false" 
            aria-label="Toggle navigation">

            <span 
              >
            </span>
          </button>

          <a 
            href="index.html" 
            class ="navbar-image float-left d-none d-sm-block"
          >
            <div 
              id = "logo-img" 
              alt="Logo image"
            >
            </div>
          </a>

          <div 
            >
            <a 
              href="index.html">
                <h1>Tilde & Brdr.</h1>
            </a>
          </div>
        </div>
      </div>


      
      

  <div 
     
    id="navBarlist"
  >
    <ul 
      id = "nav-list" 
      >

      <li 
        >
        <a 
           
          href="#">
          Home
        </a>
      </li>

      <li 
        >
        <a 
           
          href="#">
          Tøj
        </a>
      </li>

      <li 
        >
        <a 
           
          href="#">
          Udsalg
        </a>
      </li>

      <li 
        >
        <a 
           
          href="#">
          Kontakt
        </a>
      </li>

      <li 
        >
        <a 
           
          href="#">
          Facebook
        </a>
      </li>

    </ul>
  </div>
  
    </nav>
  </header>

  <div id="main-content" >
    <div  id="smallpic">
      <img src="images/lillebillede.jpg" alt="Picture of clothing"
      >
    </div>

    <div id="home-tiles" >
      <div >
        <a href="tøj-categories.html">
          <div id="tøj-tile">
            <span>tøj</span>
          </div>
        </a>
      </div>
      <div >
        <a href="andet-category.html">
          <div id="andet-tile">
            <span>andet</span>
          </div>
        </a>
      </div>
      <div >
        <a href="face-category.html">
          <div id="face-tile">
            <span>facebook</span>
          </div>
        </a>
      </div>
    </div><!-- End of #home-tiles -->

    <footer >
        <div id="footi">
          <div >
            <section id="kontakt" >
              <span>Kontakt:</span><br>
              Email: [email protected]<br>
              <a href="facebook.com">Facebook</a><br>
              Tlf: 09010222<br>
            </section>
            <section id="om" >
              Alt er hjemmesyet/hjemmelavet af mig.<br>
              Dette er min hobby, derfor kan der være længere leveringstid på nogen ordre, men kontakt mig, så vi kan finde ud af noget nærmere. Jeg håber I synes noget af det jeg laver vækker en interesse.
            </section>
            <section id="bla" >
              blablabla blablabla ballbsldablal alablslbalslbalslasal alablsblasalalsa
            </section>
      </footer>
  </div>



  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-3.6.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>
</body>
</html>

I've encountered a problem where I get some space between the browser-edge and the footer. I can tell that the size of the footer isnt big enough. The width I've set to 100% but obviously that isn't the problem. Can any1 explain to me what I'm missing?

It started out by having the same space on both left and right, but putting position:absolute somehow solved the right side. No idea what to do with the left side.

CodePudding user response：

According to W3Schools:

Most browsers will display the <body> element with the following default values:

body { display: block; margin: 8px; }

body:focus { outline: none; }

Add the following CSS:

body {
  margin: 0;
}

CodePudding user response：

body{
    font-size:  16px;
    color: #fff;
    background-color: lightskyblue;
    font-family: 'Nunito', sans-serif;
    margin:0;

}