Why Does My Card Move Down The Page When I Use the <a> Tag To Turn It Into A Link-CodePudding

Im to html and css and im trying to make a game website for my school but when i try to change div into a on for the card it moves the card down the page as seen in the images bellow,if you guys have any ideas why this is doing this please help im sort of stuck and I want to fiqure this out before I continue with this page.

Before Change Before

After Change After

<!DOCTYPE html>
   <head>
      <meta charset="utf-8"/>
     <title>Project-LuLo</title>
     <meta content="width=device-width, initial-scale=1" name="viewport"/>
      <style>
         body {
  font-family: 'Open Sans', sans-serif;
}

.shell{
justify-content:center;
display: flex;
flex-direction:row;
flex-basis: auto;
margin:5px;
}

.card {
  width: 175px;                
  display: flex;              
  flex-direction: column;       
  border: 1px solid #EF9A9A;    
  border-radius: 4px;
  overflow: hidden;
  margin: 10px;  
  text-decoration:none;
}


.card-header {
  color: #D32F2F;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #EF9A9A;
  background-color: #FFEBEE;
  padding: 5px 10px;
}

.card-main {
  display: flex;              
  flex-direction: column;     
  justify-content: center;    
  align-items: center;        
  padding: 15px 0;            
}

.material-icons {
  font-size: 72px;
  margin-bottom: 5px;
  color: #D32F2F;
}

.main-description {
  color: #D32F2F;
  font-size: px;
  text-align: center;
}

* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  overflow: hidden;
  background-color: #FFEBEE;
  padding: 20px 10px;
  border-bottom: 1px solid #EF9A9A;
   border-radius: 4px;
}

.header a {
  float: left;
  color: #D32F2F;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: #dfd5d7;
  color: #942626;
}

.header a.active {
  background-color: #D32F2F;
  color: #FFEBEE;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}

      </style>
   </head>
    <body>
<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open Sans:400,600" rel="stylesheet">

<div >
  <a href="#home" >Project-LuLo</a>
  <div >
    <a  href="#home">Home</a>
    <a href="#games">Games</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div > 
<a href = "#test">
  <div >Games</div>
  <div >
    <i >videogame_asset</i>
    <div >Web Based Games</div>
  </div>
</div>

<a href="#test">
  <div >Other</div>
  <div >
    <i >question_mark</i>
    <div >Cool Random Stuff</div>
  </div>
</div>
</div>

    </body>
</html>

CodePudding user response：

There was a few unclosed <a> tags and when you changed one of the tags to an <a> it also was removed from inside the <div> that contained your shell class which was the flex element that was holding the 2 cards beside each-other

body {
  font-family: 'Open Sans', sans-serif;
}

.shell{
justify-content:center;
display: flex;
flex-direction:row;
flex-basis: auto;
margin:5px;
}

.card {
  width: 175px;                
  display: flex;              
  flex-direction: column;       
  border: 1px solid #EF9A9A;    
  border-radius: 4px;
  overflow: hidden;
  margin: 10px;  
  text-decoration:none;
}


.card-header {
  color: #D32F2F;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid #EF9A9A;
  background-color: #FFEBEE;
  padding: 5px 10px;
}

.card-main {
  display: flex;              
  flex-direction: column;     
  justify-content: center;    
  align-items: center;        
  padding: 15px 0;            
}

.material-icons {
  font-size: 72px;
  margin-bottom: 5px;
  color: #D32F2F;
}

.main-description {
  color: #D32F2F;
  font-size: px;
  text-align: center;
}

* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  overflow: hidden;
  background-color: #FFEBEE;
  padding: 20px 10px;
  border-bottom: 1px solid #EF9A9A;
   border-radius: 4px;
}

.header a {
  float: left;
  color: #D32F2F;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: #dfd5d7;
  color: #942626;
}

.header a.active {
  background-color: #D32F2F;
  color: #FFEBEE;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}

<link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open Sans:400,600" rel="stylesheet">

<div >
  <a href="#home" >Project-LuLo</a>
  <div >
    <a  href="#home">Home</a>
    <a href="#games">Games</a>
    <a href="#contact">Contact</a>
  </div>
</div>

<div > 
  <a href="#test" >
    <div >Games</div>
    <div >
      <i >videogame_asset</i>
      <div >Web Based Games</div>
    </div>
  </a>

  <a href="#test">
    <div >Other</div>
    <div >
      <i >question_mark</i>
      <div >Cool Random Stuff</div>
    </div>
  </a>
</div>