React-Bootstrap模态增加边距或填充

Question

我添加了一个显示登录弹出窗口的模式。

我的问题是，Modal本身内部似乎有填充，这破坏了我的用户体验。

如您在图像中所见，如下所示：

添加链接，因为我无法附加图像。 https://photos.app.goo.gl/iJZRZ28o8dQhmJh4A [在此处输入链接说明] [1]

以及代码下方

import React from "react";
import { Modal } from "react-bootstrap";
import '../../assets/styles/Login.css';

class LoginRegisterModal extends React.Component {  
    constructor(props, context) {
        super(props);
        this.state = {show: false};
    }

    ....
    render() { 

        const styleModal = {
            marginTop: "15%",
            marginLeft: "30%",
            padding: 0,
            width:770,
            height:480,
            backgroundColor:"#ffffffff",
            borderRadius:21.5,
        }

        const signUpButton = document.getElementById('signUp');
        const signInButton = document.getElementById('signIn');
        const container = document.getElementById('container');

        signUpButton.addEventListener('click', () => {
          container.classList.add('right-panel-active');
        });  


        signInButton.addEventListener('click', () => {
          container.classList.remove('right-panel-active');
        });

        return (         
        <Modal show={this.state.show} style={styleModal} > 
          <div class="container" id="container">
            <div>
            .....
            </div>
            <div class="overlay-container">
              <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>Sign in.</h1>
                    <p>
                      Nice to see you again.Login and continue the journey.
                    </p>
                    <button class="ghost" id="signIn">Sign In</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>Hey, new friend!</h1>
                    <p>New to the Village? Sign up and start your journey</p>
                    <button class="ghost" id="signUp">Sign Up</button>
                </div>
              </div>
            </div>
          </div>
        </Modal>
        );  
    }  
}  

export default LoginRegisterModal;```

I have tried to remove all my containers and just display a simple text using `<p> test </p>` and I am facing the same issue. The `marginTop` and `marginLeft` defined in the style allowed my to move the Modal from the top left corner.

Any idea why I have some margin inside the modal ?


  [1]: https://photos.app.goo.gl/iJZRZ28o8dQhmJh4A