添加指向图像的链接会影响样式

Question

我正在尝试将图像设置为用户可以单击的链接，但每次我将链接添加到我的html时都会影响我的页面样式。

这是弄乱我的页面的代码：

    <ul class="portfolio">
<li class="project option-1">
  <div class="project-image"><a href="default.asp"><img src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" /></div>
  <div class="project-info">
    <h2 class="project-info-title">Cricket Journey</h2>
  </div>
</li>

一旦我在img src之前删除了href，我的页面就会恢复正常

为什么这会弄乱我的页面风格？代码似乎很好看。在此先感谢您的帮助！

EDIT CSS

    .portfolio {
display: flex;
flex-flow: row wrap;
padding: 0;
margin: 0;
list-style: none;
}

.project {
position: relative;
flex: 1 0 calc(100% - 20px);
margin: 10px;

&:hover {
    .project-info {
    }
}

@media (min-width: 520px) {
    flex: 0 0 calc((100% / 2) - 20px);
}

@media (min-width: 860px) {
    flex: 0 0 calc((100% / 3) - 20px);
}
}

.project-image img {
display: block;
width: 100%;
height: auto;
}