Links to other web pages links to same page-CodePudding

I got two HTML headings, one at the upper right corner and on on the upper left. For some reason, h1:s link merge to h2:s link and I can't figure out why.

My CSS:

h1{
   font-size: 35px;
   color: black;
   position: fixed;
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
   text-align: left;
 }  

h2{
   font-size: 35px;
   color: black;
   position: fixed;
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
   text-align: right;
  }

My HTML:

<a href="projects.html"><h1>my work</h1></a> 
<a href="projects2.html"><h2>other work</h2></a>

When I remove position: fixed; from the CSS, the links work properly

CodePudding user response：

With left:0px and right:0px on both h1 and h2 you extends the header from left to right, one cover the other.

Set only left on one and only right on the other.

h1{

   left: 0;

   font-size: 35px;
   color: black;
   position: fixed;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
   background-color:green;
 }  

h2{

   
   right: 0;

   font-size: 35px;
   color: black;
   position: fixed;
   margin-left: auto;
   margin-right: auto;
   text-align: right;
   background-color:red;
  }

<a href="projects.html"><h1>my work</h1></a> 
<a href="projects2.html"><h2>other work</h2></a>