我的网站在一个我无法摆脱的元素周围有一个奇怪的灰色边框

Question

我正在为课堂制作这个网站。我无法让这个灰色边框消失：

这是我的该部分的 HTML：

<div className="general_text" id="playControls">
    <div className="general_text" id="login_username_place">{props.userName}</div>
    <Button className="general_text" onClick={() => navigate('/play')}>Play</Button>
    <Button className="general_text" onClick={() => logout()}>Logout</Button>
</div>

我在 CSS 中将整个背景设置为粉红色：

* {
    background-color: #a965ab;
    font-family: "Lucida Console", "Courier New", monospace;
}

...但我就是不知道如何摆脱灰色边框。有什么想法吗？

我尝试将页面的整个背景设置为粉红色。 此外，根据“检查页面”，元素周围的类是

<main class="container-fluid bg-secondary text-center">

（我在代码中找不到它）。我将该类的背景颜色也改为粉红色，但什么也没发生。

Answer 1

我想我有办法解决这个问题。

我猜你的灰色边框应用在

<div className="general_text" id="playControls">
    <div className="general_text" id="login_username_place">{props.userName}</div>
    <Button className="general_text" onClick={() => navigate('/play')}>Play</Button>
    <Button className="general_text" onClick={() => logout()}>Logout</Button>
</div>

您可以使用 CSS 将其添加到我们的代码中，而不是使用某些框架的类名。

像这样：

#playControls{  
  border: 10px solid grey;
  padding-right: 0;
  padding-left: 0;
}

<div className="general_text" id="playControls">
    <div className="general_text" id="login_username_place">{props.userName}</div>
    <Button className="general_text" onClick={() => navigate('/play')}>Play</Button>
    <Button className="general_text" onClick={() => logout()}>Logout</Button>
</div>