Why is "overflow:Hidden" not working on my slide?

Question

<div class="slideshow">
    <div class="slide">
        <div class="slide-1"> <a href="#"><img src="img/01.jpg"></a>

            <div class="info-slide-left"> <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a> 
            </div>
        </div>
        <div class="slide-2"> <a href="#"><img src="img/img02.jpg"><a/>
     <div class="info-slide-rigth">

       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>

        </div>
    </div>
    <div class="slide-3"> <a href="#"><img src="img/img02.jpg"></a>

        <div class="info-slide-right-3"> <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>

        </div>
    </div>
</div>
<div class="slide">
    <div class="slide-1"> <a href="#"><img src="img/01.jpg"></a>

        <div class="info-slide-left"> <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a> 
        </div>
    </div>
    <div class="slide-2"> <a href="#"><img src="img/img02.jpg"><a/>
     <div class="info-slide-rigth">

       <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>

        <div class="publicacao-2">
            <p>Artigo publicado em
                <time datetime="2014-09-05T18:20" itemprop="datePublished">05 de setembro de 2014</time>
            </p>
        </div>
    </div>
</div>
<div class="slide-3"> <a href="#"><img src="img/img02.jpg"></a>

    <div class="info-slide-right-3"> <a href="#"><h2>Lorem Ipsum é simplesmente uma simulação de texto da indústria.</h2></a>

    </div>
</div>
</div>

CSS code:

.slideshow{
    width:100%;
    max-width:980px;
    height:auto;
    margin:0 auto;
}

.slide{
    width:100%;
    height:auto;
    display:block;
}

.slide-1{
    width:80%;
    height:505px;
    float:left;
}

.slide-2{
    width:20%;
    height:250px;
    float:left;
}

.slide-3{
    width:20%;
    height:250px;
    float:left;
}

.slide-1 img{
    width:635px;
    height:500px;
}

.slide-2 img{
    width:345px;
    height:250px;
    margin-left:-150px;
}

.slide-3 img{
    width:345px;
    height:250px;
    margin-left:-150px;
}

Answer 1

You didn’t put the div with class slideshow in your code.

I created an example with your code but adding this div

Example link

EDIT:

In the example I put the max-width only with 300px for testing.

.slideshow{
    ...
    max-width:300px;
    ...
}