Div выходит за размеры Wrapper при изменении размера Wrapper в Media

/* Wrapper */
.wrapper{
    width: 100%;
    min-width: 320px;
    max-width: 1200px;
    margin: 1em auto;
    font-family: Arial;
    display: grid;
    grid-template-areas: "main aside";
    grid-template-columns: 80% 19%;
    grid-column-gap: 1em;
    align-items: start;
}
.main{
    grid-area: main;
}
.element{
    border-radius: 10px;
    background-color: #fff;
    width: 100%;
    border: 1px solid #00000025;
    padding: 15px 20px;
}

@media only screen and (max-width: 1200px) {
    .wrapper{
        max-width: 730px;
        display: block;
    }
}

    <div class="wrapper">
        <main class="main">
            <div class="element question">
                <div class="question__top">
                    <span class="author">testtt</span> <span class="category">Бtestt</span>
                </div>
                <div class="question__middle">
                    <div class="title">test</div>
                </div>
                <div class="question__btns">
                    <div class="button"><a href="">test btn</a></div>
                </div>
            </div>
        </main>
        <aside class="aside">

        </aside>
    </div>
</body>