Nav bar page anchor links do not line up for each section when clicked

  1. go to url link
  2. click on the nav bar links “about, portfolio ,contact” - they are going past the section h1 tag title

I have used padding-top to get it to line up when clicked but it leaves to much space at the top of each section. I am using bootstrip and following some of the tutorial from with some modification for my content. it could be this but I try to keep it simple as not to go to far from there working examples.

fixed it

I played around with the following css to get it to line up how I wanted

the main thing that seemed to make the difference was adding the position:relative to each id
and z-index to allow each of the following sections from flowing onto the ones before and above it so this way it flow under the one above about me, portfolio ,contact would have the following z-index 3 about1,2value,1portfolio and contact did not put

width: 100%;
background-color:grey !important;
/did not need this after i added the padding the padding pushed down the elements
by the same margin i was using the margin with out the neg effects of the anchor tags not lineing
padding-top: 180px;


width: 100%;
background-color: blue !important;
/* margin: 50px; */
z-index: 2;
position: relative;



/* min-height: 600px; */
background-color: red;
padding-top: 180px;
padding-bottom: 0px;
margin-top: -160px;
/* height: 900px; */
z-index: 1;
position: relative;

background-color: pink;
padding-top: 180px;
margin-top: -150px;
/* min-height: 600px; */
position: relative;