这里的问题截图这是我在stackoverflow的第一篇帖子，所以如果我做得不对，请对我宽容一点，哈哈。
我正在为我正在做的一门课程做我的项目。这是Bootstrap 4，我遇到的问题是，当调整大小时，导航栏开始失去全宽。我的猜测是它下面的内容导致了这一点，但我不确定我该如何修复它。
我真的很感激这里的任何指导，因为它一直在驱使我思考，我知道这可能很容易，但我无法发现我做错了什么。
提前感谢期待聊天。
Mike
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>可能是因为.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>