Remove Body offset

danielsosa 0
Viewed 50

My page has some offset spacing that I haven't been able to delete. I want a footer which background covers the whole width of the page, I tried with position: fixed; left: 0; bottom: 0; but that only made the footer to stick at the middle of the screen wherever I scroll, I tried giving the body a relative position with 100vh and then the footer a position absolute with left, bottom at 0 and that not only it didn't work but also it didn't get rid of the offset margin, all other solutions I've tried end up not removing the offset margin, and the only that it did (position fixed) screw up the page order

html {
  overflow: scroll;
  box-sizing: border-box;}
*, *:before, *:after {
  box-sizing: inherit;}
body {
  height: 100vh;
  background-color: #e8e8e8;
  color: #333;}
h2 {
  font-family: "eurostile", sans-serif;}
h3 {
  font-family: "eurostile", sans-serif;}
p {
  font-family: "europa", sans-serif;}
a {
  font-family: "eurostile", sans-serif;
  font-size: large;}


/* Top Nav Menu */
.topnav {
    background-color: aquamarine;
    overflow: hidden;}
.topnav a {
    float: right;
    color: blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;}
.topnav a:hover {
    background-color: #ddd;
    color: black;}
.topnav a.icon {
    float: left;
    background-color: antiquewhite;
    color: aliceblue;}
.topnav .dotedmenu {
    display: none;}
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.dotedmenu {
      float: right;
      display: block;
    } }
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.dotedmenu {
    position: absolute;
    right: 0;
    top: 0;
}
.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
}}

/* Heading */
.heading {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: 300px;}
.title {
  background-image:url(images/header-background.jpg);
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100%;
  text-align: center;
  padding-bottom: 10px;}
.MainTitle {
  font-size: clamp(1.8em,calc(1em + 2.4vw),3em);
  font-weight: 900;
  font-family: "eurostile", sans-serif;
  display: block;
  margin-left: auto;
  margin-right: auto;}
@media screen and (max-width: 520px) {
  .title {
    background-image: none;
  }}

/* Hexagon */ 
.hexagon {
  position: relative;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 0%);
      cursor: pointer;
    visibility: hidden;
    width: 400px; /*400*/
    height: 200px; /*200*/ }
.hexagon-in0 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg); }
.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);}
.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://placekitten.com/240/240);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
            -o-transform: rotate(-60deg);
            transform: rotate(-60deg);}
.second .hexagon-in2:hover {
  background-image: url(http://placekitten.com/241/241);}
.rectangle {
    position: absolute;
    left: 50%;
    top: 9%;
    transform: translate(-50%, 9%);
    z-index: -1;
    width: 90%;
    height: 60%;
    background-color: black;
    /*margin-top: 120px;*/}
.description {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translate(-50%, 22%);
  color: red;
  width: 70%;
  max-height: 75%;}
.hexagon-in2 img {
  display: block;
  padding-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 40%;}

/* Cards */
.traits {
  display: flex;
  justify-content: center;
  width: 100%;
  flex: none;}
.column {
  float: left;
  width: 33.333%;
  padding: 0 10px;
  position: relative;}
.row {
  margin: 0 -5px;}
.row:after {
  content: "";
  display: table;
  clear: both;}

/*trairs first*/
.first {
  height: 700px;}
.first .row {
  height: inherit;}
.first .column {
  height: inherit;}
@media screen and (max-width: 700px) {
  .column {
    width: 100%;
    display: block;}
  .rectangle{
    width: 100%;}
  .description {
    width: 80%;
    margin-top: 7%;}
  .first {
    height: 2200px;}
  .first .row {
    height: 700px;}}

/* Accordion */
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;}  
  .active, .accordion:hover {
    background-color: #ccc; }
  .panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;}

/* Slideshow */
* {box-sizing:border-box}
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;}
.mySlides {
  display: none;}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;}
.next {
  right: 0;
  border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);}
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;}
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;}
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;}
.active, .dot:hover {
  background-color: #717171;}
.fade {
  animation-name: fade;
  animation-duration: 1.5s;}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}}
#testimonials {
  display: none;}

/* Footer */
.footer {
  background-color: #431c82;
  position:fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
.centered_column {
    display: flex;
    justify-content: center;}
.middle {
    flex: none;
    width: 33.333%;
    display: block;}
.middle img {
    display: block;
    margin-left: auto;
    margin-right: auto;}
<!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.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <title>Document</title>
</head>
<body>
    <div class="topnav" id="myTopnav">
        <a class="icon" href="#"><img src="images/logo.png" alt="placeholder" style="width: 40px; height: 40px;"></a>
        <a href="#">Contact</a>
        <a href="#">Blog</a>
        <a href="#">My History</a>
        <a href="javascript:void(0);" class="dotedmenu" onclick="myFunction()">
            <i class="fa fa-bars"></i>
          </a>
    </div>
    <div class="heading">
        <div class="title">
            <h1 class="MainTitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
            <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
        </div>
    </div>
    <div class="traits first">
        <div class="row">
            <div class="column">
                <div class="hexagon"><div class="hexagon-in0"><div class="hexagon-in1"><div class="hexagon-in2"><img src="images/it-support.png" alt="electronics"></div></div></div></div>
                <div class="rectangle"></div>
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                
            </div>
            <div class="column">
                <div class="hexagon"><div class="hexagon-in0"><div class="hexagon-in1"><div class="hexagon-in2"><img src="images/web-dev.png" alt="electronics"></div></div></div></div>
                <div class="rectangle"></div>
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                
            </div>
            <div class="column">
                <div class="hexagon"><div class="hexagon-in0"><div class="hexagon-in1"><div class="hexagon-in2"><img src="images/electronics.png" alt="electronics"></div></div></div></div>
                <div class="rectangle"></div>
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
                
            </div>
        </div>
    </div>
    <div class="work_experience">
        <button class="accordion">Section 1</button>
        <div class="panel">
          <p>Lorem ipsum...</p>
        </div>
    </div>
    <div class="traits second">
        <div class="row">
            <div class="column">
                <div class="hexagon"><div class="hexagon-in0"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div></div>
            </div>
            <div class="column">
                <div class="hexagon"><div class="hexagon-in0"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div></div>
            </div>
            <div class="column">
                <div class="hexagon"><div class="hexagon-in0"><div class="hexagon-in1"><div class="hexagon-in2"></div></div></div></div>
            </div>
        </div>
    </div>
    <div id="testimonials">
        <div class="slideshow-container">
            <div class="mySlides fade">
              <div class="numbertext">1 / 3</div>
              <img src="red.png" style="width:100%">
              <div class="text">Caption Text</div>
            </div>
            
            <div class="mySlides fade">
              <div class="numbertext">2 / 3</div>
              <img src="yellow.png" style="width:100%">
              <div class="text">Caption Two</div>
            </div>
            
            <div class="mySlides fade">
              <div class="numbertext">3 / 3</div>
              <img src="green.png" style="width:100%">
              <div class="text">Caption Three</div>
            </div>
            
            <a class="prev" onclick="plusSlides(-1)">❮</a>
            <a class="next" onclick="plusSlides(1)">❯</a>
            
            </div>
            <br>
            

            <div style="text-align:center">
              <span class="dot" onclick="currentSlide(1)"></span> 
              <span class="dot" onclick="currentSlide(2)"></span> 
              <span class="dot" onclick="currentSlide(3)"></span> 
            </div>
    </div>
    <div class="footer">
        <div class="centered_column">
            <div class="middle">
                <a class="icon" href="#"><img src="images/logo.png" alt="placeholder" style="width: 40px; height: 40px;"></a>
                <h3>placeholder</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </div>
        </div>
    </div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

frontend css html
1 Answers

If I understood the question correctly you want that footer has 100% width of page without any space around it and without using position:fix. You can add margin: 0 to body tag and change the style of .footer as follow:

body {
    margin: 0;
    background-color: #e8e8e8;
    color: #333;
}

/* other styles ... */

.footer {
    background-color: #431c82;
    width: 100%;
}

Also you can use these styles instead:

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* other styles ... */

.footer {
    background-color: #431c82;
    width: 100%;
}

hamid-davodi0
Related