.maindiv {
    width: 250px;
    min-height: 300px;
    background-color: #f5ba13;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    padding-left: 290px;

    margin-left: auto;
    margin-top: 30px;
}

<div class="maindiv"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I created a div, but unlike any other project I made, this one moves when I resize the window. I also had to encounter the problem with other elements in this project too.

I tried right: 50%; left: 50%; but the div seems to be stuck at the opposite side of the window.

I also did position: absolute; but it didn't do anything.

Code:

.maindiv {
    width: 250px;
    min-height: 300px;
    background-color: #f5ba13;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 35px;
    padding-left: 290px;

    margin-left: auto;
    margin-top: 30px;
}

CodePudding user response：

Just add margin-right: auto to .maindiv class

CodePudding user response：

try using this

.maindiv {
        width: 250px;
        min-height: 300px;
        background-color: #f5ba13;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
        border-radius: 35px;
        padding-left: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-left: auto;
        margin-top: 30px;
    }