-1

html, body {
    margin: 0;
    padding: 0
}
.navbar {
    width: 100%;
    background-color: #555;
    overflow: hidden;
    position: fixed;
    top: 0;
    padding: 0px;
    scroll-behavior: smooth;
  }
.navbar a {
    float: left;
    text-align: center;
    padding: 12px;
    color: white;
    text-decoration: none;
    font-size: 17px;
  }
.navbar a:hover {
    background-color: #000;
  }
.active {
    background-color: #4CAF50;
  }
@media screen and (max-width: 600px) {
    .navbar a {
      float: none;
      display: block;
    }
  }
body {
    position: relative;
    top: 30px;
    font-family: 'Cabin Condensed';
    font-size: 18pt;
    background-color: #f2f2f2;
    text-align: left;
    padding: 10px;
    margin: 0;
}
h1 {
    font-size: 24pt;
    color: #08bdbd;
    text-align: center;
    padding: 18px 0 18px 0;
    margin: 0 0 10px 0;
}
h1 span {
    border: 4px dashed #08bdbd;
    padding: 10px;
}
p {
    padding: 0;
    margin: 0;
}
.img-circle {
    border: 3px solid white;
    border-radius: 50%;
}
.section {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
}
.form {
    text-align: center;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
}
#header {
    background-image: url("banner.png");
    background-size: cover;
    text-align: center;
    font-size: 40pt;
    font-weight: bold;
    padding-top: 5px;
}
.social {
    background-color: #fff;
    text-align: center;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
}
#contacts img:hover {
    opacity: 0.8
}
.quote {
    font-size: 14pt;
    text-align: right;
    margin-top: 10px;
}
ul {
    text-align: left;
    list-style-position: outside;
}
textarea {
    height: 100px;
    min-height: 40px;
    min-width: 70%;
    max-width: 70%;
}
input, textarea {
    margin-bottom: 10px;
    font-size: 11pt;
    padding: 15px 10px 10px;
    border: 1px solid #cecece;
    background-color: #efefef;
    color: #787575;
    border-radius: 5px;
    width: 70%;
    outline: none;
}
.submit:hover {
    background-color: #cfcfcf;
}

.copyright {
    text-align: right;
    font-size: 10pt;
    padding-bottom: 10px;
    color: grey;
}
<div class="navbar">
 <a class="active" href="#about">About Me</a>
 <a href="#skills">Skills</a>
 <a href="#schedule">Schedule</a>
 <a href="#contact">Contact</a>
</div>
anastaciu
  • 23,467
  • 7
  • 28
  • 53
Ian
  • 35
  • 5
  • Is there any default padding on the `` tag? – Matt Dalzell Apr 17 '20 at 20:33
  • HTML has no default padding nor margin. Please do not listen to Md Junaid Alam's answer. Just remove the default margin of 8px from your body tags or do what Marshmallow told you. – stacks Apr 17 '20 at 20:41
  • @Stacks, I agree to you, that there is no default padding to body. In this case padding:10px in style for body {...} is causing the extra space. – Md Junaid Alam Apr 17 '20 at 20:51

2 Answers2

1

There are 2 methods to fix this.

Method 1:

Try adding left: 0px; to the .navbar selector.

Here is your code:

.navbar {
  width: 100%;
  background-color: #555;
  overflow: hidden;
  position: fixed;
  top: 0;
  padding: 0px;
  left: 0px;
  scroll-behavior: smooth;
}

.navbar a {
  float: left;
  text-align: center;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #000;
}

.active {
  background-color: #4CAF50;
}

@media screen and (max-width: 600px) {
  .navbar a {
    float: none;
    display: block;
  }
}
<div class="navbar">
   <a class="active" href="#about">About Me</a>
   <a href="#skills">Skills</a>
   <a href="#schedule">Schedule</a>
   <a href="#contact">Contact</a>
</div>

Here is a living demo: https://codepen.io/marchmello/pen/gOarVVo

Method 2:

Add margin: 0; to the body selector.

Here is your code:

body {
   margin: 0;
}
    
.navbar {
    width: 100%;
    background-color: #555;
    overflow: hidden;
    position: fixed;
    top: 0;
    padding: 0px;
    scroll-behavior: smooth;
}

.navbar a {
    float: left;
    text-align: center;
    padding: 12px;
    color: white;
    text-decoration: none;
    font-size: 17px;
}

.navbar a:hover {
    background-color: #000;
}

.active {
    background-color: #4CAF50;
}

@media screen and (max-width: 600px) {
    .navbar a {
      float: none;
      display: block;
    }
}
<div class="navbar">
  <a class="active" href="#about">About Me</a>
  <a href="#skills">Skills</a>
  <a href="#schedule">Schedule</a>
  <a href="#contact">Contact</a>
</div>

Here is a living demo: https://codepen.io/marchmello/pen/KKdMPKJ

Community
  • 1
  • 1
MARSHMALLOW
  • 1,315
  • 2
  • 12
  • 24
0

Update After you updated css code. padding in the body is causing extra space. 

body {
    position: relative;
    top: 30px;
    font-family: 'Cabin Condensed';
    font-size: 18pt;
    background-color: #f2f2f2;
    text-align: left;
    padding: 10px; /*Set it to 0*/
    margin: 0;
}

body tag have default margins. Reset it to 0;

body {
margin:0;
}
.navbar {
    width: 100%;
    background-color: #555;
    overflow: hidden;
    position: fixed;
    top: 0;
    padding: 0px;
    scroll-behavior: smooth;
  }
.navbar a {
    float: left;
    text-align: center;
    padding: 12px;
    color: white;
    text-decoration: none;
    font-size: 17px;
  }
.navbar a:hover {
    background-color: #000;
  }
.active {
    background-color: #4CAF50;
  }
@media screen and (max-width: 600px) {
    .navbar a {
      float: none;
      display: block;
    }
  }
<div class="navbar">
 <a class="active" href="#about">About Me</a>
 <a href="#skills">Skills</a>
 <a href="#schedule">Schedule</a>
 <a href="#contact">Contact</a>
</div>
Md Junaid Alam
  • 1,131
  • 13
  • 20