Image overlap on css responsive page

Question

This is my first try at responsive design and I can't quite get it right. As seen in the first screenshot the tower image overlaps a div and I'm not sure what I've done wrong. Image here: http://postimg.org/image/l9ax77rhz/

The width of the container is 1170px and I wanted to trigger the scaling of the images and text once the screen size dropped below that point. Image here: http://postimg.org/image/n420djzlj/ Then dropping below 760 the sections begin to overlap. I basically want to fix the overlap and have the images display first on small screens with the title and text below.

Can anyone explain to me how to do that or what I've done wrong? Html and css below

<style>
  .lenovo-container {
        width: 1170px;
        height: 381px;
        min-width: 858px;
    }

  .lenovo-container img {
        float: left;
        }

  @media (max-width:1170px) {
        img {

            max-width: 100%;
            height: auto;

        }
        .lenovo-container {
            max-width: 100%

  @media (max-width: 858) {
        .lenovo-container p {
            display: block;

        }
  }
</style>
<div class="lenovo-container">
    <img class=" wp-image-1498 size-full alignnone" src="wp-content/uploads/2015/06/Rack-server-e1434645252235.jpg" alt="Rack server" width="500" height="381" />
    <h2>Rack Servers</h2>
    <p>Lenovo ThinkServers and System x Rack Servers are Ideal for small to medium-sized business and feature power-efficient designs, segmented workloads, and fit-for-purpose applications.</p>
    <div class="product-button" style="vertical-align: bottom;">
        <div class="button-inner-product"><a href="http://shop.lenovo.com/us/en/systems/servers/racks/" target="_blank">Learn more</a>
        </div>
    </div>

</div>
<br>
<div class="aligncenter" style="width: 1170px; display: block; vertical-align: bottom">
    <hr />
    </div>

<div class="lenovo-container">
<img class="alignnone size-full wp-image-1565" src="wp-content/uploads/2015/06/Lenovo-server-e1434648963684.jpg" alt="Lenovo server" width="500" height="520" />
<h2>Tower Servers</h2>
<p>Lenovo tower servers provide the performance, reliability, and easy-to-use tools to manage your file/print and point-of-sale workloads.</p>
</div>

Answer 1

The culprit is the float:left. Try this instead:

.lenovo-container {
    width: 1170px;
    height: 381px; /* If your image is getting cut off, it's too large.  
                      Try auto instead or remove this property altogether. */
    min-width: 858px;
    overflow: hidden;
}

.lenovo-container img {
    float: left;
}

Floats will break the element out of document flow, and float them to the left of ALL elements. This fix forces the container to respect the bounds of the float.

A somewhat cleaner fix is:

.lenovo-container:after {
  display: table;
  content: '';
  clear: both;
}

If you want the image to resize to the container, then try this:

 @media (max-width:1170px) {
    .lenovo-container img {
      max-height: 100%;
    }
    .lenovo-container {
        max-width: 100%
    }
 }