使div（并排）响应

Question

我想让divs响应，但是我没有找到任何解决方案。你能帮我解决这个问题吗？

这是小屏幕显示的结果：

如您所示，div在移动设备中并不大，因此用户无法显示文本。

这是全屏屏幕：

这是代码：

<div id="main" class="container center" style="">
        <center> <img src="../img/logo.png" height="" /> <h1 class="bleu" style ="text-align: center;color: #0b509e;font-size: 30px;font-weight:bold" > Connexion - Inscription </h1></center> 
        
        
        <div id="d1" class="login" style="min-height:300px">
            <!--div class="login"-->
                <h1 class="bleu"style="padding-top:0px;">Se connecter </h1>
                <form action="../../index.php" method="post">
                    <label for="username">
                        <i class="fas fa-user"></i>
                    </label>
                    <input type="text" name="username" placeholder="Username" id="username" required>
                    <label for="password">
                        <i class="fas fa-lock"></i>
                    </label>
                    <input type="password" name="password" placeholder="Password" id="password" required>
                    <input type="submit" value="Se connecter">
                </form>
            <!--/div-->
        
        </div>
        <div id="d2" class="register">
            <!--div class="register"-->
            <h1 class="bleu" style="padding-top:0px;" >S'inscrire</h1>
            <form action="register.php" method="post">
            <!--form action="test_phone.php" method="post"-->
                <label for="username">
                    <i class="fas fa-user"></i>
                </label>
                <input type="text" name="username" placeholder="Username" id="username" required>
                
                <label for="password">
                    <i class="fas fa-lock"></i>
                </label>
                <input type="password" name="password" placeholder="Password" id="password" required>
                
                <label for="email">
                    <i class="fas fa-envelope"></i>
                </label>
                <input type="email" name="email" placeholder="Email" id="email" required>
                
                <label for="tel">
                    <i class="fas fa-phone"></i>
                </label>
                <input type="tel" name="tel" id="tel" placeholder="" required style="padding-left:50px;">
                <!--input type="tel" name="" id="full-phone" placeholder=""  style="padding-left:50px;" -->
                
                
            
                <div style="width:100%; padding-left:20px">
                    
                    <label class="radio" for="" style="width:60%; background-color: #fff;color:black; padding-left:0px; height:20px; justify-content: left;">
                        <input type="radio" id="particulier" name="statut" value="particulier">
                        Je suis un particulier
                    
                    </label>
                    
                    
                    <label class="radioRegister" for="" style="width:60%; background-color: #fff;color:black; padding-left:0px;height:30px; justify-content: left;">
                        <input type="radio" id="professionnel" name="statut" value="professionnel">
                        Je suis un professionnel
                    </label>
                
                
                </div>
                
                <!--div id="error_msg" hidden>
                </div-->
                <span id="valid-msg" class="hide valid-msg"> Téléphone valide</span>
                <span id="error-msg" class="hide error-msg">Erreur</span>
                <input type="submit" name="inscrire" value="S'inscrire">
                <!--button type="submit" name="inscrire" class="btn btn-blue text-center" style="background-color:#3ac5c8;">S'inscrire </button-->
            </form>
        </div> <!-- d2 -->
        
        
        
        <!--/div-->
    
    </div> <!-- main -->

CSS：

 #main {
    position: absolute;
    max-width: 950px;
    min-height: 500px;
    border: 1px solid black;
    padding: 30px;
    background-color: #eee;
    margin-left: calc(50% - 450px);
}
#d1 {
    width: 400px;
    height: 200px;
    border: 1px solid red;
}
.login {
    width: 400px;
    background-color: #f6f6f6;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin: 100px auto;
}
#d2 {
    width: 400px;
    border: 1px solid blue;
}
.register {
    width: 400px;
    background-color: #ffffff;
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
    margin: 100px auto;
}

可以帮助我做出div响应。 预先谢谢你