CSS issue. Images overlapping page, and are way to large

My page is made up if three parts body(Background image), a subbody (content container) and a bunch of images

The page looks all right on pc, but on mobile it explodes all over the place. the images are aligned like this

--BODY--DIV--IMAGE--IMAGE--DIV--BODY--

--PADDING WITHIN DIV------------------

--BODY--DIV--IMAGE--IMAGE--DIV--BODY--

etc.

However everything ends up looking like this: --BODY----DIV--IMAGE-----------------------------

The image scales way beyond the subbody, and overlap all the other images.

Code:

.subbody
{
margin: auto;
width: 70%;
border: 5px solid white;
border-radius: 25px;
padding: 20px;
text-align: center;
background-image: url(imgres/Content.jpg);
}

.thumbnail
{
height: 30%;
margin: 10px;
border: 5px solid white;
border-radius: 25px;
}

the thumbnail class is the one being used on the image. the image is printed out using php, although i don´t think that is the culprit.

Any help is greatly appreciated. Thanks in advance.