图像不占用100％的div？

I am trying to create a paragraph and next to that paragraph are images that are generated randomly from a database table. The main container is called ".container" and this includes every element. .container is set to width: 90%. The paragraph (.header) floats to the left and has a width of 70%. The generated images (.recommend) floats to the right and has a width of 30%. Everything works out fine, but the only problem is that when I set the images to take up the whole space of the .recommend div (width: 100%), but it doesn't do that. Instead, the width of the images are 30%. How do I make the images take up the whole space of the .recommend div?

<!DOCTYPE html>
    <html>

<head><link type="text/css" rel="stylesheet" href="/science/template.css"></head>

<body>
    <div class="container">

    <div class="header">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="recommend">
<?php
                    $numArray = array();

                    for ($i = 1; $i <=10; $i++)
                    {
                        $numArray[$i] = $i;
                    }

                    shuffle($numArray);

                    $resultSet = $db->query("SELECT * FROM table");

                    if ($resultSet->num_rows != 0)
                    {
                        while ($rows = $resultSet->fetch_assoc())
                        {
                            $id = $rows["id"];
                            $image1 = $rows["image1"];
                            $image2 = $rows["image2"];
                            $image3 = $rows["image3"];

                            $title = $rows["title"];
                            $title2 = $rows["title2"];
                            $title3 = $rows["title3"];

                           echo "<div class=row>";
                            if ($id == $numArray[0])
                            {
                                echo "<div class=col-md-4 id=left><img src=$image1><p>$title</p></div>";
                            }

                            if ($id == $numArray[1])
                            {
                                echo "<div class=col-md-4 id=left><img src=$image1><p>$title</p></div>";
                            }

                            if ($id == $numArray[2])
                            {
                                echo "<div class=col-md-4 id=left><img src=$image1><p>$title</p></div>";
                            }
                           echo "</div>";
                        }
                    }
                ?>
                </div>
        </div>
    </body>
</html>

CSS

.container{
    background--color: green;
    width: 90%;
    height: auto;
}

.header{
    background-color: blue;
    float: left;
    width: 70%;
}

.recommend{ 
    background-color: red;
    width: 30%;
    float: right;
}

.recommend img{
    width: 100%;
}

It would be FAR more useful to see the rendered HTML than the PHP that generates the html.
The image is taking the full width of the containing div - which is set to 30% width. This markup: <div class=col-md-4 id=left> is using a Bootstrap grid class. And, col-md-4 tells the div to be 4/12 (or 30%) of the width of the parent. Since the parent is .recommend, then the div is 30%, and the image inside is 100% of THAT (which means it is 30% of the .recommend div)

So, you can either remove the col-md-4 class from the divs, or you can try and resolve it another way.

According to the CSS provided .recommend div is set to width:30% All the child elements that have width:100% (images) will only take up as much space as .recommend div, which is 30%