كيف أقوم بالتحكم في أماكن وجود العناصر داخل الصفحة مع وضع الإعتبار إذا قمت بتكبير الصفحة أو تصغيرها تظل الصفحة مرتبة؟

<div id="s_log">
    <p id="p_form">إنشاء حساب جديد</p>
    <br>
    <div>
        <label id="name">الإسم</label>
        <label id="name1">إسم العائلة</label>
        <br>
        <input id="na" type="text" placeholder="أدخل الإسم الأول" />
        <input id="na1" type="text" placeholder="أدخل الإسم العائلة" />
    </div>
    <div>
        <label id="name">إسم المستخدم</label>
        <label id="name1">البريد الإلكتروني</label>
        <br>
        <input id="na" type="text" placeholder="إسم المستخدم" />
        <input id="na1" type="text" placeholder="البريد الإلكتروني" />
    </div>
    <div>
        <label id="name">كلمة المرور</label>
        <label id="name1">إعادة كلمة المرور</label>
        <br>
        <input id="na" type="text" placeholder="كلمة المرور" />
        <input id="na1" type="text" placeholder="إعادة كلمة المرور" />
    </div>
    <div>
        <button>
            <a id="a1_form" href="Medo.html">إنشاء حساب</a>
        </button>
    </div>
    <div style="text-align: center; line-height: 30px;">
        <label id="lbl3">لديك حساب؟</label>
        <br>
        <a id="a2_form" href="login.html">إنتقل لصفحة تسجيل الدخول</a>
    </div>
</div>

#s_log {
    position:relative;
    top:15%;
    width:35%;
    display:block;
    margin:0 auto;
    margin-bottom:15%;
    padding:10px 30px 30px 30px;
    background:white;
    border-radius:15px;
    box-shadow:3px 3px 2px 2px rgba(175,174,174,0.3);
}

#s_log div {
    padding:10px;
    border:1px solid black;
    text-align:right;
    margin-bottom:20px;
}

#p_form {
    font-size:30px;
    /*border:1px solid black;*/
    font-weight:bolder;
    color:#676767;
    background-image:url(user+.png);
    background-size:contain;
    background-position:right;
    background-position:425px;
    background-repeat:no-repeat;
}

#name {
    font-size:20px;
    color:#676767;
    text-align:right;
}

#na {
    width:45%;
    padding:8px;
    padding-left:33px;
    font-size:16px;
    font-weight:bold;
    text-align:left;
    background:#efefef;
    background-image:url(user1.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:1px;
    border:1px solid #c6c6c6;
    border-radius:3px;
    margin-top:7px;
}

#name1 {
    float:left;
    margin-left:175px;
    font-size:20px;
    color:#676767;
    text-align:right;
}

#na1 {
    float:left;
    width:45%;
    padding:8px;
    padding-left:33px;
    font-size:16px;
    font-weight:bold;
    text-align:left;
    background:#efefef;
    background-image:url(user1.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:1px;
    border:1px solid #c6c6c6;
    border-radius:3px;
    margin-top:7px;
}

#pa {
    width:100%;
    padding:8px;
    padding-left:35px;
    font-size:16px;
    font-weight:bold;
    text-align:left;
    background:#efefef;
    background-image:url(pass.png);
    background-repeat:no-repeat;
    background-size:contain;
    background-position:1px;
    border:1px solid #c6c6c6;
    border-radius:3px;
    margin-top:7px;
}

#re {
    font-size:20px;
    color:#676767;
}

#a_form {
    font-size:20px;
    text-decoration:none;
    color:#5e58f8;
    float:left;
}

#a_form:active {
    color:#1a12f7;
}

button {
    width:100%;
    padding:10px;
    font-size:20px;
    /*font-weight:bold;*/
    color:white;
    background:#2e5fe3;
    border:none;
    border-radius:3px;
    text-align:center;
    text-decoration:none;
}

button:hover {
    background:#0945e6;
}

#a1_form {
    padding:10px;
    font-size:20px;
    /*font-weight:bold;*/
    color:white;
    background:#2e5fe3;
    border:none;
    border-radius:3px;
    text-align:center;
    text-decoration:none;
}

#a1_form:hover {
    background:#0945e6;
}

#lbl3 {
    font-size:20px;
    color:#676767;
    text-align:center;
}

#a2_form {
    font-size:20px;
    text-decoration:none;
    color:#5e58f8;
}

#a2_form:active {
    color:#1a12f7;
}