CSS: Child element won't stay within parent element

HTML-CSS
#1

I am cloning google fonts and I have a minor but very annoying issue of the tiles not staying within their parent container when the screen width shrinks below 790px.

This causes the tiles to ultimately not be centered anymore.

Specifically, the right side of the child will expand about 20+ px outside of its parent element.

Here is the pen

Here is the git repo

Here is the specific section where I think the culprit lies, the ol tag/mainGrid and its related CSS:

<div class="pageContainer">
            <ol class="mainGrid mgList">
                <li class="tile i0 listIt light dark">
                    <div class="tileRow1">
                        <p class="tileP fType" data-tileIndex="i0">
                            Roboto
                        </p>
                        <span>
                            <img src="img/rounded-add-button.svg" alt="use font" class="pSign">
                        </span>
                    </div>
                    <div class="tileRow2">
                        <p class="tileP">
                            Christian Robertson
                        </p>
                    </div>
                    <p data-defaulttext="What if the cheap smile ate the ear? The wiggly fault can't rush the upper." class="fonText ft1"></p>
                </li> 
. . .

Feels like I have tried everything I can find to fix it, if anyone could point out what I am missing here I would really appreciate it.

Thanks in advance!

#2

The <ol class="mainGrid mgList"> is at the center of the parent container <div class="pageContainer">, so maybe the problem is: the width of <li class="tile i0 listIt light dark"> is more than <ol class="mainGrid mgList">…

%E5%9C%96%E7%89%87
%E5%9C%96%E7%89%871920×1020 124 KB

This should be the problem…

@media only screen and (max-width: 790px) {
    button.list {
        display: none;
    }
    ol.mainGrid.mgList {
        display: block !important;
    }
    .tile {
        width: 100% !important;
        margin: inherit;
    }
}
1 Like
#4

Thanks for the reply, I had tried running it without the media query but no success. I fixed it, although I do not understand how.

The problem, and in turn the solution, was the tiles width.

For a reason that is beyond my current understanding, every single width except for ‘default’ would cause this issue.

100% or inherit would not work, and I don’t understand why they don’t.

here is the updated pen

#5

I actually figured it out now.

Can’t believe I didn’t consider this, but the issue was the 5px border I had.

#6