HTML class not wrapping the right area

1

Hello,

I am creating a restaurant menu page for a personal project. I managed to display the items side by side, now I need to have a general class to wrap around both of the left and right section so I can create a border around the items like the upper left picture.

My problem is that I already created a salads container class but it is not wrapping the right area. It is only wrapping the title of the menu and not the area underneath it (upper right picture blue area)

I’ve also included my html code. I could not figure out why it is not wrapping the entire left and right section.

image.jpg1024×1270 286 KB

2

Here is a better screenshot

image.jpg1340×1299 298 KB

3

From a logical standpoint, it’s wrapping it fine. Must be a problem with your CSS.

Could you post your code (both HTML and CSS) as text? Wrap it in triple-backticks like this:

```javascript
//Your code here    
```
4

Here is my CSS.

#salads-container {
    max-width: 70%;
    margin: 1em auto;
    border: 1px solid #ddd;
    padding: .3em .6em;
}
.group-name
{
        font-size: 1.7em;
        color: #e0607e;
        margin-top: 50px;
        font-style: italic;
}

.left {
    float:left; 
    margin: 0;
    width: 50%;
    padding:10px;
    background:#fff;
}
.right{
    float:right; 
    margin: 0;
    width: 50%;
    padding:10px;
    background:#fff;
}

h4 {
    font-size: 1.3em;
    color: #848e98;
    border-bottom-style: dotted;
    border-bottom-color: #ff9b9b;
}

p {
    font-size: 1.2em;
}

Thank you