HTML5 Footer - Margin That I Can't Remove

Can't remove margin/padding on footer

Here is the culprit (line 36):

.clearFix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

The . character is causing the gap. Change content: "." to content: "".

Alternatively, since you are explicitly setting a height of 0, you could also just add overflow: hidden to hide the gap.

As a side note, I'd suggest changing the class to:

.clearfix:after {
    content: '';
    clear: both;
    display: table;
}

How do I remove the top margin in a web page?

I had similar problem, got this resolved by the following CSS:

body {    
    margin: 0 !important;
    padding: 0 !important;
}

Sticky footer margin issue

Delete the * CSS and change the HTML one to:

html, body {
    height: 100%;
    margin: 0;
}

.footer * {
    margin: 0;
}

Can't remove the space under my nav bar

Change your margin of h1 element to 0 (it causes this issue)

h1, h2, h3, h4, h5, h6 {
    font-family: tahoma, sans-serif;
    color: #531;
    margin: 0;
}

remove weird space between body and footer html

Please try this. Unwanted space between body and footer because in div end some dotted character is visible i.e (.............)

body{    margin: 0px;    font-family: sans-serif;}
.flex-container{    /* flexbox properties*/    display: -webkit-flex;    -webkit-flex-direction: row;}
.flex-item{    /*flexbox properties*/    display: -webkit-flex;    align-items: center;    justify-content: center;}
.header{    height: 50px;    background-color: tomato;    margin: 0;    border-bottom: 3px solid rgba(0,0,0,0.3);}
ul{    justify-content: flex-end;}
.nav{    flex-direction: row;    margin: 2px;    padding: 0 10px 0 10px;    background-color: rgba(0,0,0,0.2);    color: white;}
.content{    height: 300px;    margin: 0;}
.sidebar{    background-color: grey;    flex: 1;}    
.main{    background-color: lightgrey;    flex: 2;}
footer{    height: 50px;    border-top: 3px solid rgba(0,0,0,0.3);    background-color: tomato;}

<body>    <div>        <ul class="header flex-container">            <li class="nav flex-item">About</li>            <li class="nav flex-item">Links</li>            <li class="nav flex-item">Contact</li>        </ul>    </div>

    <div class="content flex-container">        <div class="sidebar flex-item">Sidebar</div>        <div class="main flex-item">        This is the content<br />        This is the content<br />        This is the content<br />        This is the content<br />        </div>        <div class="sidebar flex-item">Sidebar</div>    </div></body><footer>footer here</footer>

How do you get the footer to stay at the bottom of a Web page?

To get a sticky footer:

Have a <div> with class="wrapper" for your content.
Right before the closing </div> of the wrapper place the
<div class="push"></div>.
Right after the closing </div> of the wrapper place the
<div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Removing footer in HTML/CSS

You can set the overflow-y on the body to scroll and still use the fixed background

new WOW().init();

/* AUTHOR LINK */
$('.about-me-img img, .authorWindowWrapper').hover(function() {
  $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function() {
  //$('.authorWindowWrapper').stop().css('display', 'none').find('p').removeClass('trans');
});

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

body {
  font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 13px;
  background-color: #000000 !important;
  background-size: cover;
  margin: 0;
  height: 100%;
  overflow-y: scroll;
  background-image: url("https://media.istockphoto.com/photos/programming-source-code-on-digital-screen-software-developer-and-picture-id1336271758?b=1&k=20&m=1336271758&s=170667a&w=0&h=HoJqtqo1r54eZf9G4OqBXRHXLsYoD0X9wMR-vXFBiTE=");
}

.overlayE {
  position: fixed;
  width: 100%;
  height: 100% !important;
  margin: 0;
  padding: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.886);
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  font-size: 13px;
  direction: ltr;
}

.sectionClass1 {
  padding: 80px 0px 50px 0px;
  position: relative;
  display: block;
}

.row {
  width: 980px;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.sectiontitle {
  background-position: center;
  text-align: center;
  min-height: 20px;
}

.sectiontitle h2 {
  font-size: 30px;
  color: #222;
  margin-bottom: 0px;
  padding-right: 10px;
  padding-left: 10px;
}

.headerLine {
  width: 160px;
  height: 2px;
  display: inline-block;
  background: #101F2E;
}

.fullWidth {
  width: 100%;
  display: table;
  float: none;
  padding: 0;
  min-height: 1px;
  height: 100%;
  position: relative;
}

/********************************/

/*  SECTION WORK EXPERIENCE
  ********************************/

#work-experience .sectiontitle .headerLine {
  width: 280px;
}

#work-experience .headerline {
  width: 280px;
}

.cbp_tmtimeline {
  margin: 60px 30px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.cbp_tmtimeline:before {
  content: '';
  position: absolute;
  top: 3%;
  bottom: 0;
  width: 10px;
  background: #324454;
  left: 13%;
  height: 100%;
}

.cbp_tmtimeline li:last-child:before {
  content: initial;
}

.cbp_tmtimeline>li .cbp_tmtime {
  display: block;
  width: 25%;
  padding-right: 100px;
  position: absolute;
}

.cbp_tmtimeline>li .cbp_tmtime span {
  display: block;
  text-align: right;
}

.cbp_tmtimeline>li .cbp_tmtime span:first-child {
  font-size: 0.9em;
  color: #bdd0db;
}

.cbp_tmtimeline>li .cbp_tmtime span:last-child {
  font-size: 2.9em;
  color: #3594cb;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child {
  color: #6cbfee;
}

.cbp_tmtimeline>li .cbp_tmlabel {
  margin: 0 0 15px 25%;
  background: rgba(50, 68, 84, 1);
  color: #FFF;
  padding: 30px;
  font-size: 1.2em;
  font-weight: 300;
  line-height: 1.4;
  font-family: 'Open Sans';
  position: relative;
  border-radius: 5px;
  min-height: 150px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
  background: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmlabel h3 {
  margin-top: 0px;
  color: white;
  font-size: 20px;
  margin-bottom: 5px;
  padding: 0 0 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 {
  opacity: 0.7;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 0px;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  line-height: 1.2em;
  font-weight: 600;
  padding: 0;
  padding-bottom: 10px;
  margin: 0;
  text-align: left;
}

.cbp_tmtimeline>li .cbp_tmlabel h4 i {
  margin-right: 5px;
  vertical-align: middle;
}

.cbp_tmtimeline>li .cbp_tmlabel:after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: rgba(50, 68, 84, 1);
  border-width: 10px;
  top: 70px;
}

.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
  border-right-color: #2B3A48;
}

.cbp_tmtimeline>li .cbp_tmicon {
  width: 150px;
  height: 150px;
  top: 3%;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 1.4em;
  line-height: 40px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  color: #151515;
  background: #324454;
  border-radius: 50%;
  text-align: center;
  left: 8%;
  margin: 0 0 0 -25px;
}

.cbp_tmtimeline li {
  margin-bottom: 70px;
  position: relative;
}

.sectionClassProject {
  position: relative;
  display: block;
  /* background: #f7f7f7; */
  margin: 0 auto;
  padding: 80px 1.875em 3.125em;
}

.projectParagraph {
  font-size: 18px;
  margin: 0.5em 0 0;
  font-family: 'Source Sans Pro', serif;
}

.projectParagraphLink {
  font-size: 15px !important;
  font-weight: 500 !important;
  margin-top: 50px !important;
  margin-bottom: 0px;
  text-align: right;
}

.projectParagraphLink a {
  color: white;
  text-decoration: underline;
}

.cbp_tmicon img {
  width: 100%;
}

.faPra {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 70px;
  vertical-align: middle;
  color: white;
  line-height: 150px;
}

.label {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  color: #FFFFFF;
  display: inline;
  font-size: 12px;
  font-weight: bold;
  margin-right: 10px;
  padding: 5px 15px;
}

.date {
  color: #BFC3C7;
  display: block;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  top: 30px;
  right: 20px;
}

.date i {
  margin-right: 8px;
  vertical-align: top;
  font-size: 18px;
  line-height: 20px;
}

@media (max-width: 1024px) {
  .cbp_tmtimeline:before {
    display: none;
  }
  .cbp_tmtimeline>li .cbp_tmtime {
    width: 100%;
    position: relative;
    padding: 0 0 20px 0;
  }
  .cbp_tmtimeline>li .cbp_tmtime span {
    text-align: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel {
    margin: 30px 0 70px 0;
    padding: 50px 30px 30px 30px;
    font-weight: 400;
    font-size: 95%;
    float: left;
  }
  .cbp_tmtimeline>li .cbp_tmlabel:after {
    right: auto;
    border-right-color: transparent;
    border-bottom-color: rgb(50, 68, 84);
    top: -20px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: transparent;
    border-bottom-color: rgb(43, 58, 72);
    left: 65px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmlabel:after {
    right: 65px;
  }
  .cbp_tmtimeline>li:nth-child(odd) .cbp_tmicon {
    position: relative;
    float: left;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li:nth-child(even) .cbp_tmicon {
    position: relative;
    float: right;
    left: auto;
    margin: 0px 5px 0 0px;
  }
  .cbp_tmtimeline>li .cbp_tmtime span:last-child {
    font-size: 1.5em;
  }
}

@media (max-width: 32em) {
  .cbp-ntaccordion {
    font-size: 70%;
  }
}

<link rel="stylesheet" href="experience.css">
<script src="experience.js"></script>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900&amp" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin,latin-ext" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

<body>
  <div class="overlayE"></div>
  <div id="workexperience">
    <div class="row ">
      <div class="sectiontitle">
        <h2>Work experience</h2>
        <span class="headerLine"></span>
      </div>
      <ul class="cbp_tmtimeline">
        <li>
          <div class="cbp_tmicon cbp_tmicon-phone">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Web developer</h3>
            <div class="date">
              <i class="fa fa-calendar"></i>April 2014 - Current
            </div>
            <h4><i class="fa fa-flag"></i>Davic Company, Bratislava</h4>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit obcaecati ipsa quae, iusto laudantium qui, nisi eum modi perspiciatis quasi facilis corporis iure soluta enim incidunt itaque aspernatur sequi tempora.</p>
          </div>
        </li>
        <li>
          <div class="cbp_tmicon cbp_tmicon-screen">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Web designer</h3>
            <h4><i class="fa fa-flag"></i>Fannous Company, Prague</h4>
            <div class="date"><i class="fa fa-calendar"></i>June 2012 - April 2014</div>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt quasi perspiciatis, aliquid sed maiores accusamus. Adipisci quidem nostrum quos quae doloremque esse a, ipsum earum, recusandae omnis dignissimos et sint.</p>
          </div>
        </li>
        <li>
          <div class="cbp_tmicon cbp_tmicon-mail">
            <i class="faPra fa-briefcase"></i>
          </div>
          <div class="cbp_tmlabel wow fadeInRight animated">
            <h3>Web designer</h3>
            <h4><i class="fa fa-flag"></i>Techixs Company, London</h4>
            <div class="date"><i class="fa fa-calendar"></i>November 2009 - June 2012</div>
            <p class="projectParagraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla labore atque alias ipsa, nam quod rerum repellat cumque, aliquam sequi vitae voluptatibus cum soluta incidunt tempore accusamus eius sed excepturi!Lorem ipsum dolor sit amet,
              consectetur adipisicing elit. Tempora natus veritatis aperiam repellendus dolor vel, expedita assumenda eos, mollitia quae ullam esse voluptas vero. Dolores culpa eaque vitae eum quibusdam?</p>

          </div>
        </li>
      </ul>
    </div>
  </div>
</body>