Установка поля div для фона в белый цвет?

Я пытаюсь установить фон маленьких разделов в этом поле на белый.

На изображении над горизонтальным правилом написано «Тестовый элемент», а позади него есть небольшой белый фон. Я пытаюсь сделать фон выглядит так …

Это мой php файл.

<div class="containerwhite">
<div id="container" class="container">
<?php
$sql = "SELECT id, name, description, imgpath, price, sold FROM traceylynn";
$result = $db->query($sql);
$num = 0;
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo '<div id="item">';
echo '<div class="name">';
echo '<p>' .$row["name"].' </p>';
echo '</div>';
echo '<hr class="namehr">';

echo '<div class="price">';
echo '<p> $'.$row["price"].'</p>';
echo '<hr class="pricehr">';
echo '</div>';

echo '<div class="image">';
echo '<img alt="Cannot load image" src="'.$row["imgpath"].'"/>';
echo '</div>';

echo '<div class="button">';
if($row["sold"]==0){
echo '<button type="button" class="btn btn-success btn-lg" data-toggle="modal"data-target="#'.$row["id"].'"> More Info </button>';
}else{
echo '<button type="button" class="btn btn-success btn-lg disabled"> Sold! </button>';
}
echo '</div>';
echo '</div>';
}
}
?>
</div>
</div>

CSS

@font-face {
font-family: "BlendaScript";
src: url('../fonts/BlendaScript1.otf') format("opentype");
src: url('../fonts/BlendaScript2.woff') format("woff"), url('../fonts/BlendaScript3.ttf') format("TrueType"), url('../fonts/BlendaScript4.woff2') format("woff2");
}

@font-face {
font-family: Sugar;
src: url('../fonts/Sugar.ttf' format("truetype"));
}

body {
background-color: #EFC6D3;
}

.containerwhite {
background-color: white;
width: 100%;
height: auto;
margin-top: -15px;
}

.container {
margin-bottom: 20px !important;
}

.traceylynnheader {
padding-top: 20px;
font-size: 30px;
font-family: BlendaScript;
text-align: center;
color: #3D3028;
}

.traceylynnheader hr {
margin-top: -15px;
width: 80%;
border: none;
height: 1px;
color: #333;
/* old IE */
background-color: #333;
/* Modern Browsers */
}

#item {
border: 1px solid black;
padding-right: 30px;
padding-left: 30px;
margin-top: 50px;
margin-right: 20px;
width: 350px;
height: 400px;
float: left;
background-color: #d0e0aa;
margin-bottom: 20px;
}

#item>.name {
text-align: center;
color: black;
font-family: Sugar;
font-size: 20px;
padding-top: 10px;
color: #3D3028;
background-color: white;
}

#item>.name>.namewhite {
background-color: white;
}

#item>.namehr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #3D3028;
margin: 1em 0;
padding: 0;
}

#item>.price {
text-align: center;
color: green !important;
font-family: Sugar;
font-size: 20px;
}

#item>.price>.pricehr {
display: block;
height: 1px;
border: 0;
border-top: 2px solid #3D3028;
margin: 1em 0;
padding: 0;
}

.image {
width: 100%;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}

.image img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}

.button {
text-align: center;
padding: 25px;
}