Screenshot of problem here这是我在 stackoverflow 上的第一篇文章，所以如果我做的不对，请放轻松，哈哈。
我正在做我正在做的课程的项目。它与 Bootstrap 4 相关，我遇到的问题是调整大小时导航栏开始失去其全宽。我的猜测是它下面的内容导致了这种情况，但我不确定如何修复它。
我真的很感激这里的任何指导，因为它一直让我精神错乱，我知道这可能很简单，但我无法发现我做错了什么。
预先感谢，期待聊天。
迈克
html body {
font-family: 'Bree Serif', serif;
background-color: #181a3d;
}
/*---------------------Navbar Section---------------------------------------*/
#navbar-color {
background-color: #1e203f!important;
border: solid #6fc4a2;
}
.nav-link {
display: block;
padding: .25rem 1.5rem!important;
white-space: nowrap;
}
.nav-link-color {
color: white!important;
}
.nav-link-color:hover {
color: #6fc4a2!important;
}
.navbar-light .navbar-toggler {
color: #f8f9fa;
border-color: rgb(111 196 162);
background-color: rgb(111 196 162);
}
.nav-img {
border: groove #6fc4a2;
border-radius: 15px;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.sign-btn {
border: groove #6fc4a2;
border-radius: 15px;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
background-color: #1e203f;
color: white;
margin-bottom: 10px;
margin-top: 10px;
}
.sign-btn:hover {
color: #6fc4a2;
}
p.nav-link-color {
margin-top: 0px;
margin-bottom: 3px;
padding-bottom: 2px;
}
/*------------------CSS styling for the main page Box 1 and Box 2---------------------------*/
#box-1 {
margin-top: 40px;
border: solid transparent!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 35px;
background-color: #1e203f;
}
#box-2 {
margin-top: 40px;
border: solid transparent!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 35px;
background-color: #1e203f;
}
.fa, .fas:hover{
transform: scale(1.2);
transition: 3s;
}
.h2, h2 {
font-size: 1.5rem!important;
}
.h2-mem {
text-align: center;
padding-top: 10px;
color: white;
}
.p-mem {
text-align: center;
padding-top: 10px;
color: white;
}
.h2-app {
text-align: center;
padding-top: 10px;
color: white;
}
.p-app {
text-align: center;
padding-top: 10px;
color: white;
}
.hr-mem {
background-color: #6fc4a2;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.hr-p {
background-color: #6fc4a2;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
/*----------------------Carousel Styling---------------------------------------------*/
.carousel {
margin: 30px 30px;
padding-top: 100px;
border: solid transparent!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 35px;
background-color: #1e203f;
color: white;
}
#client-testimonial-carousel {
min-height: 300px!important;
margin: 5px 0 10px!important;
padding-top: 45px!important;
border: solid transparent!important;
}
.blockquote-footer {
background-color: #1e203f;
border: solid transparent!important;
/* border-width: 1px; */
}
/*---------------------Navbar Dropdown Menu-----------------------------------*/
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #1e203f!important;
background-clip: padding-box;
border: 1px groove #6fc4a2!important;
border-radius: .25rem;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #6fc4a2!important;
text-decoration: none;
background-color: #1e203f!important;
}
/*---------------------Footer Section---------------------------------------*/
footer {
background-color: #1e203f;
border: solid #6fc4a2;
}
.social-networks{
text-align: center;
}
.social-networks li{
display:inline;
padding-right: 30px;
}
.social-networks i {
margin: 1%;
padding-top: 20px;
font-size: 28px;
color: white;
}
.social-networks i:hover {
margin: 1%;
padding-top: 20px;
font-size: 28px;
color: #6fc4a2;
transform: scale(1.5);
}
#bf-logo {
background-color: #181a3d;
text-align: center!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
height: 250px;
width: 250px;
padding: 40px;
}
.bf-brand {
border: groove #6fc4a2;
border-radius: 20px;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
img.bf-brand:hover {
transform: scale(1.5)!important;
transition: 5s;
}
/*--------------------Home page boxes------------------------*/
#box-1 {
margin-top: 40px;
border: solid black;
}
#box-2 {
margin-top: 40px;
border: solid black;
}
.home-testimonial {
border: solid black;
margin-top: 100px;
margin-bottom: 200px;
}
.carousel {
margin: 30px 30px;
padding-top: 100px;
border: solid black;
}
#client-testimonial-carousel {
min-height: 400px;
margin: 30px 0 10px;
}
/*-----------------------------------Modal Header------------------------------*/
.modal-header {
background-color: #181a3d;
color: #6fc4a2;
box-shadow: 0 6px 20px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%)!important;
}
.modal-title {
text-align: center!important;
}
.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: white!important;
text-shadow: 0 1px 0 #fff;
opacity: 10!important;
}
.close:hover {
color: #6fc4a2!important;
text-shadow: 0 1px 0 #6fc4a2!important;
opacity: 10!important;
}
/*-----------------------------------Modal body------------------------------*/
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem;
background-color: #181a3d;
color: #6fc4a2;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%)!important;
}
.form-text {
color: whitesmoke;
}
.btn-success {
color: #fff;
border-radius: 25px!important;
background-color: #6fc4a2!important;
border-color: #6fc4a2!important;
}
.btn-success:hover {
color: #fff;
background-color: #6fc4a2!important;
border-color: #6fc4a2!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
/*-------------------------------------------Bruna Page-----------------------------------*/
#bruna-image {
border-radius: 30px 30px 0 0;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #181a3d!important;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
box-shadow: 0 4px 50px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 30px !important;
margin-top: 40px;
margin-bottom: 80px;
width: 330px!important;
}
div.card-info {
background-color: #181a3d!important;
border-radius: 0 0 30px 30px;
}
.bf-card-details {
color: #6fc4a2!important;
}
.bf-card-job {
color: #6fc4a2!important;
}
.card-about {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #181a3d;
background-clip: border-box;
color: white;
border: 1px solid rgba(0,0,0,.125);
box-shadow: 0 4px 50px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 30px!important;
margin-top: 40px;
margin-bottom: 80px;
width: 400px;
height: 782px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bruna Fernandes Fisioteropia | Welcome</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<body>
<nav class="navbar navbar-light bg-light navbar-expand-sm" id="navbar-color">
<a href="/" class="navbar-brand"><img src="assets/images/bf-logo (1).png" height="60" width="60" class="nav-img" alt=""></a>
<!----ml-auto will push this button to the right------data toggle tells Bootstrap that it will be used as a trigger for a collapsable element on the page------------->
<!----data-target is the ID of the collapsible element-----aria = accessible rich internet applications provides accessibility options to screen readers----->
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target ="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<!-----inside the span we create a class that gives us the icon, our burger button----->
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item mr-2"><a class="nav-link nav-link-color" href="index.html">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-link-color" href="services.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item nav-link-color" href="fisio.html">Fisioteropia & Pilates</a>
<a class="dropdown-item nav-link-color" href="appointments.html"> Appointments</a>
</div>
</li>
<li class="nav-item mr-2"><a class="nav-link nav-link-color" href="members.html">Members</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-link-color" href="contact.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="nav-link nav-link-color" href="contact.html">Contact</a>
</div>
</li>
<!---Will only display on a mob device with "d-block + d-sm-none--->
<li class="nav-item mr-auto d-block d-sm-none"> <button data-toggle="modal" data-target="#signUpModal" class="sign-btn"><p class="nav-link-color" class="sign-btn">Sign In / Sign Up</p></button></li>
</ul>
</div>
<div class="d-none d-md-block">
<button data-toggle="modal" data-target="#signUpModal" class="sign-btn">Sign In / Sign Up</button>
</div>
</nav>
<!-----Modal dialogue goes here because it captures the entire screen so it needs to be a top-level element in the body---->
<!-----A modal is described as being an island of content that sits in the middle of the page. The modal is hidden by default----->
<div class="modal" tabindex="-1" id="signUpModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Sign Up to BF Fisioteropia!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required>
<small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
<div class="form-group">
<label for="repeatPassword">Repeat Password</label>
<input type="password" class="form-control" id="repeatPassword" placeholder="Repeat Password" required>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
<main class="container-fluid">
<section class="bruna-page">
<div class="row justify-content-around">
<div class="col-sm-12 col-md-4"class="bruna-box-1">
<div class="card">
<img src="assets/images/bruna_professional_resized.jpg" id="bruna-image" alt="Image of Bruna Fernandes">
<div class="card-info">
<h4 class="text-center mt-3 bf-card-details" ><b>Bruna Fernandes</b></h4>
<p class="text-center bf-card-details">Physiotherapist</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4" class="bruna-box-2">
<div class="card-about">
<h2 class="text-center mt-4">About Bruna</h2>
<hr id="hr-about">
<p class="text-center mt-4 mr-5 ml-5">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Voluptatem eaque, saepe cumque labore asperiores accusamus quae officiis quidem.
Iusto porr o quasi placeat, natus enim rem explicabo alias quibusdam expedita provident.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium magni est optio?
Voluptates hic animi omnis sint iure quis!
Illum quod ex aperiam animi facere nobis mollitia aut dignissimos dolorum.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Voluptatem eaque, saepe cumque labore asperiores accusamus quae officiis quidem.
Iusto porr o quasi placeat, natus enim rem explicabo alias quibusdam expedita provident.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium magni est optio?
Voluptates hic animi omnis sint iure quis!
Illum quod ex aperiam animi facere nobis mollitia aut dignissimos dolorum.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Voluptatem eaque, saepe cumque labore asperiores accusamus quae officiis quidem.
</p>
</div>
</div>
<div class="col-sm-12 col-md-4" class="bruna-box-3">
Bruna-box-3
</div>
</div>
</section>
</main>
<footer class="footer fixed container-fluid">
<ul class="social-networks">
<li>
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook"></i> </a>
</li>
<li>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i> </a>
</li>
<li>
<a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i> </a>
</li>
<li>
<a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i> </a>
</li>
</ul>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</body>
</html>答案 0 :(得分：0)
可能是因为您的 .card-about 宽度比您的视口宽。
尝试使用 max-width 代替。我把你的 height 改成了 auto 这样当高度变大时内容就不会溢出了。
html body {
font-family: 'Bree Serif', serif;
background-color: #181a3d;
}
/*---------------------Navbar Section---------------------------------------*/
#navbar-color {
background-color: #1e203f!important;
border: solid #6fc4a2;
}
.nav-link {
display: block;
padding: .25rem 1.5rem!important;
white-space: nowrap;
}
.nav-link-color {
color: white!important;
}
.nav-link-color:hover {
color: #6fc4a2!important;
}
.navbar-light .navbar-toggler {
color: #f8f9fa;
border-color: rgb(111 196 162);
background-color: rgb(111 196 162);
}
.nav-img {
border: groove #6fc4a2;
border-radius: 15px;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.sign-btn {
border: groove #6fc4a2;
border-radius: 15px;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
background-color: #1e203f;
color: white;
margin-bottom: 10px;
margin-top: 10px;
}
.sign-btn:hover {
color: #6fc4a2;
}
p.nav-link-color {
margin-top: 0px;
margin-bottom: 3px;
padding-bottom: 2px;
}
/*------------------CSS styling for the main page Box 1 and Box 2---------------------------*/
#box-1 {
margin-top: 40px;
border: solid transparent!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 35px;
background-color: #1e203f;
}
#box-2 {
margin-top: 40px;
border: solid transparent!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 35px;
background-color: #1e203f;
}
.fa, .fas:hover{
transform: scale(1.2);
transition: 3s;
}
.h2, h2 {
font-size: 1.5rem!important;
}
.h2-mem {
text-align: center;
padding-top: 10px;
color: white;
}
.p-mem {
text-align: center;
padding-top: 10px;
color: white;
}
.h2-app {
text-align: center;
padding-top: 10px;
color: white;
}
.p-app {
text-align: center;
padding-top: 10px;
color: white;
}
.hr-mem {
background-color: #6fc4a2;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.hr-p {
background-color: #6fc4a2;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
/*----------------------Carousel Styling---------------------------------------------*/
.carousel {
margin: 30px 30px;
padding-top: 100px;
border: solid transparent!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 35px;
background-color: #1e203f;
color: white;
}
#client-testimonial-carousel {
min-height: 300px!important;
margin: 5px 0 10px!important;
padding-top: 45px!important;
border: solid transparent!important;
}
.blockquote-footer {
background-color: #1e203f;
border: solid transparent!important;
/* border-width: 1px; */
}
/*---------------------Navbar Dropdown Menu-----------------------------------*/
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #1e203f!important;
background-clip: padding-box;
border: 1px groove #6fc4a2!important;
border-radius: .25rem;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #6fc4a2!important;
text-decoration: none;
background-color: #1e203f!important;
}
/*---------------------Footer Section---------------------------------------*/
footer {
background-color: #1e203f;
border: solid #6fc4a2;
}
.social-networks{
text-align: center;
}
.social-networks li{
display:inline;
padding-right: 30px;
}
.social-networks i {
margin: 1%;
padding-top: 20px;
font-size: 28px;
color: white;
}
.social-networks i:hover {
margin: 1%;
padding-top: 20px;
font-size: 28px;
color: #6fc4a2;
transform: scale(1.5);
}
#bf-logo {
background-color: #181a3d;
text-align: center!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
height: 250px;
width: 250px;
padding: 40px;
}
.bf-brand {
border: groove #6fc4a2;
border-radius: 20px;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
img.bf-brand:hover {
transform: scale(1.5)!important;
transition: 5s;
}
/*--------------------Home page boxes------------------------*/
#box-1 {
margin-top: 40px;
border: solid black;
}
#box-2 {
margin-top: 40px;
border: solid black;
}
.home-testimonial {
border: solid black;
margin-top: 100px;
margin-bottom: 200px;
}
.carousel {
margin: 30px 30px;
padding-top: 100px;
border: solid black;
}
#client-testimonial-carousel {
min-height: 400px;
margin: 30px 0 10px;
}
/*-----------------------------------Modal Header------------------------------*/
.modal-header {
background-color: #181a3d;
color: #6fc4a2;
box-shadow: 0 6px 20px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%)!important;
}
.modal-title {
text-align: center!important;
}
.close {
float: right;
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
color: white!important;
text-shadow: 0 1px 0 #fff;
opacity: 10!important;
}
.close:hover {
color: #6fc4a2!important;
text-shadow: 0 1px 0 #6fc4a2!important;
opacity: 10!important;
}
/*-----------------------------------Modal body------------------------------*/
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem;
background-color: #181a3d;
color: #6fc4a2;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%)!important;
}
.form-text {
color: whitesmoke;
}
.btn-success {
color: #fff;
border-radius: 25px!important;
background-color: #6fc4a2!important;
border-color: #6fc4a2!important;
}
.btn-success:hover {
color: #fff;
background-color: #6fc4a2!important;
border-color: #6fc4a2!important;
box-shadow: 0 4px 8px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
}
/*-------------------------------------------Bruna Page-----------------------------------*/
#bruna-image {
border-radius: 30px 30px 0 0;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #181a3d!important;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
box-shadow: 0 4px 50px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 30px !important;
margin-top: 40px;
margin-bottom: 80px;
width: 330px!important;
}
div.card-info {
background-color: #181a3d!important;
border-radius: 0 0 30px 30px;
}
.bf-card-details {
color: #6fc4a2!important;
}
.bf-card-job {
color: #6fc4a2!important;
}
.card-about {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #181a3d;
background-clip: border-box;
color: white;
border: 1px solid rgba(0,0,0,.125);
box-shadow: 0 4px 50px 0 #39fd9bc9, 0 6px 20px 0 rgb(0 0 0 / 19%);
border-radius: 30px!important;
margin-top: 40px;
margin-bottom: 80px;
max-width: 400px; /* max-width instead of width */
height: auto; /* height auto */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bruna Fernandes Fisioteropia | Welcome</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<body>
<nav class="navbar navbar-light bg-light navbar-expand-sm" id="navbar-color">
<a href="/" class="navbar-brand"><img src="assets/images/bf-logo (1).png" height="60" width="60" class="nav-img" alt=""></a>
<!----ml-auto will push this button to the right------data toggle tells Bootstrap that it will be used as a trigger for a collapsable element on the page------------->
<!----data-target is the ID of the collapsible element-----aria = accessible rich internet applications provides accessibility options to screen readers----->
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target ="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<!-----inside the span we create a class that gives us the icon, our burger button----->
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item mr-2"><a class="nav-link nav-link-color" href="index.html">Home</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-link-color" href="services.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Services</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item nav-link-color" href="fisio.html">Fisioteropia & Pilates</a>
<a class="dropdown-item nav-link-color" href="appointments.html"> Appointments</a>
</div>
</li>
<li class="nav-item mr-2"><a class="nav-link nav-link-color" href="members.html">Members</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-link-color" href="contact.html" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="nav-link nav-link-color" href="contact.html">Contact</a>
</div>
</li>
<!---Will only display on a mob device with "d-block + d-sm-none--->
<li class="nav-item mr-auto d-block d-sm-none"> <button data-toggle="modal" data-target="#signUpModal" class="sign-btn"><p class="nav-link-color" class="sign-btn">Sign In / Sign Up</p></button></li>
</ul>
</div>
<div class="d-none d-md-block">
<button data-toggle="modal" data-target="#signUpModal" class="sign-btn">Sign In / Sign Up</button>
</div>
</nav>
<!-----Modal dialogue goes here because it captures the entire screen so it needs to be a top-level element in the body---->
<!-----A modal is described as being an island of content that sits in the middle of the page. The modal is hidden by default----->
<div class="modal" tabindex="-1" id="signUpModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Sign Up to BF Fisioteropia!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required>
<small id="emailHelp" class="form-text">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" required>
</div>
<div class="form-group">
<label for="repeatPassword">Repeat Password</label>
<input type="password" class="form-control" id="repeatPassword" placeholder="Repeat Password" required>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
<main class="container-fluid">
<section class="bruna-page">
<div class="row justify-content-around">
<div class="col-sm-12 col-md-4"class="bruna-box-1">
<div class="card">
<img src="assets/images/bruna_professional_resized.jpg" id="bruna-image" alt="Image of Bruna Fernandes">
<div class="card-info">
<h4 class="text-center mt-3 bf-card-details" ><b>Bruna Fernandes</b></h4>
<p class="text-center bf-card-details">Physiotherapist</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4" class="bruna-box-2">
<div class="card-about">
<h2 class="text-center mt-4">About Bruna</h2>
<hr id="hr-about">
<p class="text-center mt-4 mr-5 ml-5">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Voluptatem eaque, saepe cumque labore asperiores accusamus quae officiis quidem.
Iusto porr o quasi placeat, natus enim rem explicabo alias quibusdam expedita provident.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium magni est optio?
Voluptates hic animi omnis sint iure quis!
Illum quod ex aperiam animi facere nobis mollitia aut dignissimos dolorum.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Voluptatem eaque, saepe cumque labore asperiores accusamus quae officiis quidem.
Iusto porr o quasi placeat, natus enim rem explicabo alias quibusdam expedita provident.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium magni est optio?
Voluptates hic animi omnis sint iure quis!
Illum quod ex aperiam animi facere nobis mollitia aut dignissimos dolorum.
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Voluptatem eaque, saepe cumque labore asperiores accusamus quae officiis quidem.
</p>
</div>
</div>
<div class="col-sm-12 col-md-4" class="bruna-box-3">
Bruna-box-3
</div>
</div>
</section>
</main>
<footer class="footer fixed container-fluid">
<ul class="social-networks">
<li>
<a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook"></i> </a>
</li>
<li>
<a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i> </a>
</li>
<li>
<a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i> </a>
</li>
<li>
<a href="https://www.youtube.com" target="_blank"><i class="fab fa-youtube"></i> </a>
</li>
</ul>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</body>
</html>