Why is my container width going outside of the parent container?

[orclord1]

I just can’t figure this out. In the picture below you will see that my container where I have an icon and name listed, goes outside of the container box on the right side.

I do want this to be responsive (without using flexbox). I have it working fine on other parts of my site, but I just can’t get it working here. I do not want to adjust the percentage width for the above reason.

Any ideas on what I can adjust to make this work?

CSS:

    .resourcesOuterContainer {
        max-width: 420px;
        height: auto;
        background: #aeaeae;
        border: 2px solid #585858;
        border-radius: 5px;
        text-align: center;
        margin: 20px auto 0;
        padding: 2px; /*added with auto width*/
        display: block;
    }

    .resourcesMainContainer {
        max-width: 400px;
        height: auto;
        width: 100%;
        background-color: black;
        border: 2px solid #620000;
        border-radius: 4px;
        margin-left: 2px;
        margin-right: 2px;
        display: inline-block;
        text-align: left;
    }

    .resourcesLine {
        height: 25px;
        width: 100%;
        background-color: #ffffff;
        display: block;
        color: black;
        margin: auto;
        padding: 2px;
        margin-bottom: 1px;
    }
    
    .resourcesLine img {
        width: 25px;
        height: 25px;
        margin-right: 4px;
        float: left;
    }
    
    .resourcesLineText {
        width: auto;
        font-size: 20px;
        font-weight: normal;
        font-style: normal;
        font-family: Calibri, Arial, Helvetica, sans-serif;
        float: left;
        text-align: left;
    }
    
    .resourcesLine:hover {
        background-color: #f8c1c0;
        color: #000cae;
    }

    .resourcesLine a:hover {
        background-color: #f8c1c0;
        color: #000cae;
    }

And the PHP code that calls it:

    if($row){
        echo '<div class="resourcesOuterContainer">';
            echo '<div class="tabsMenuTitle">';
                echo 'SET RESOURCES';
            echo '</div>';
        echo '<div class="resourcesMainContainer">';
        foreach($row as $value) {
            // Container for each Resource Line
            echo '<a href="' . $value['reso_url'] . '">';
                echo '<div class="resourcesLine">';
                    echo '<img src="' . $icons_path . $value['rest_icon'] . '"  border=0 ALT = "' . $value['rest_icon'] . '">';
                    echo '<div class="resourcesLineText">';
                        echo $value['reso_name'];        
                    echo '</div>';
                echo '</div>';
            echo '</a>';
        }
        echo '</div>';
        echo '</div>';
    }

(Note: for visual ease of coding I use echo for most of my code – prior to implementation I will be removing most).

[coothead]

Hi there orclord1,

it would help members to resolve your problems,
if you could supply the HTML output code rather
than the PHP code.

coothead

[PaulOB]

If something is 100% wide and then has either padding borders or margins then it will be greater than the space it fits in unless you are using the border -box model.

You don’t need to set width100% on block elements like divs anyway as they automatically stretch to fill their parent.

You don’t also need to declare divs as block elements either because that’s what they are by default.