子宽度大于父宽度的问题

Question

Example

我很难复制一个很酷的hover effect我在codrops上找到的。我使用的是与她使用的完全相同的html代码，但<a href>元素大于其父元素有问题。

我做错了什么？

    <div class="grid">
<figure class="effect-romeo">
                    <img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img05"/>
                    <figcaption>
                        <h2>Wild <span>Romeo</span></h2>
                        <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
                        <a href="#">View more</a>
                    </figcaption>           
                </figure><figure class="effect-romeo">
                    <img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img05"/>
                    <figcaption>
                        <h2>Wild <span>Romeo</span></h2>
                        <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
                        <a href="#">View more</a>
                    </figcaption>           
                </figure><figure class="effect-romeo">
                    <img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img05"/>
                    <figcaption>
                        <h2>Wild <span>Romeo</span></h2>
                        <p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
                        <a href="#">View more</a>
                    </figcaption>           
                </figure>
</div>

Answer 1

问题似乎是因为课程.grid figure figcaption padding:2em。删除它并检查输出！像下面一样更新你的CSS并检查!!

CSS：

.grid figure figcaption{
   //padding:2em;
}