HTML element does not go as full width

user_16183804 0
Viewed 93

So I have a code for a website that uses HTML and CSS but I have a problem with CSS.

HTML:

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <h2>TEST</h2>
    <div class="navbar">
      <div class="navbar-inner">
        <a href="todo.html" class="notactive"><img src="todo.png"></a>
        <a href="home.html" class="active"><img src="home.png"></a>
        <a href="info.html" class="notactive"><img src="info.png"></a>
      </div>
    </div>
  </body>
</html>

CSS:

body {
  background-color: #222222;
  width: 100%;
}

img {
  width: 50px;
  height: 50px;
}

a {
  cursor: pointer;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar a {
  color: #f2f2f2;
  text-align: center;
  display: inline-block;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin: 0px auto;
}

.navbar a:hover {
  background: #222222;
  color: black;
}

This is my result: Result Image

It works and all, but if you look at the bottom left (at the menu), it isn't fully covered. I have tried many ways to cover it, but I can't seem to get it right.

Any ideas? Appreciated if you explain it to me as well.

css html
3 Answers

Most major browsers apply a margin on the body, thus causing the footer not expanding to the viewport's full width.

To get rid of the margin, applying margin: 0 to body:

body {
  background-color: #222222;
  width: 100%;
  margin:0;
}

img {
  width: 50px;
  height: 50px;
}

a {
  cursor: pointer;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar a {
  color: #f2f2f2;
  text-align: center;
  display: inline-block;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin: 0px auto;
}

.navbar a:hover {
  background: #222222;
  color: black;
}
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <h2>TEST</h2>
    <div class="navbar">
      <div class="navbar-inner">
        <a href="todo.html" class="notactive"><img src="todo.png"></a>
        <a href="home.html" class="active"><img src="home.png"></a>
        <a href="info.html" class="notactive"><img src="info.png"></a>
      </div>
    </div>
  </body>
</html>

user_142512210

Just add left : 0;

.navbar {
        overflow: hidden;
        background-color: #333;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
user_134579170

You can also reduce that type of error by just adding this code at the top.

*{
margin:0;
padding:0;
box-sizing:border-box;
}
user_77709420
Related