html - 我的 html 页面向左移动,但我看不到问题出在哪里
问题描述
您好,我选择了一个模板来使用,一开始还可以,但是经过一些修改后,我看不到哪里搞砸了,整个页面都向左移动了,但我不知道问题出在哪里。
<!DOCTYPE html>
<html lang="en">
<head>
......stuff
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="51">
<!-- Nav Bar Start -->
<div class="navbar navbar-expand-lg bg-light navbar-light">
<div class="container-fluid">
<a href=""> <img src="img/mylogo2.png" width="80px"></a>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav ml-auto">
.... nav stuff
</div>
</div>
</div>
</div>
<!-- Nav Bar End -->
<!-- Hero Start -->
<div class="hero" id="home">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-sm-12 col-md-6 mt-4">
<div class="hero-content">
<div class="hero-text">
<p>Welcome To </p>
<h1>{{ strtoupper($heros->title) }}</h1>
<h2></h2>
<div class="typed-text">
<p style="color:#ED428B;"> {{ $heros->content }}</p>
</div>
</div>
<div class="hero-btn mt-4">
<a class="btn" href="">Hire Us</a>
<a class="btn" href="#contact">Contact Us</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 d-none d-md-block">
<div class="hero-image">
<img src="images/{{$heros->img}}" alt="Hero Image" width="600px" height="600px">
</div>
</div>
</div>
</div>
</div>
<!-- Hero End -->
<!-- Service Start -->
<div class="service" id="service">
<div class="container">
...
</div>
</div>
<!-- Service End -->
<!-- Banner Start -->
<div class="banner wow zoomIn" data-wow-delay="0.1s">
<div class="container">
.....
</div>
</div>
<!-- Banner End -->
<!-- Portfolio Start -->
<p>..............................</p>
<!-- Portfolio End -->
<!-- Banner Start -->
<div class="banner wow zoomIn" data-wow-delay="0.1s">
<div class="container">
....banner
</div>
</div>
<!-- Banner End -->
<!-- Price Start -->
<div class="price" id="price">
.....
</div>
<!-- Price End -->
<!-- Testimonial Start -->
<div class="testimonial wow fadeInUp" data-wow-delay="0.1s" id="review">
<div class="text-center wow zoomIn" data-wow-delay="0.1s">
.....test...stuff
</div>
</div>
<!-- Testimonial End -->
<!-- Footer Start -->
<div class="footer shape wow fadeIn" data-wow-delay="0.3s">
<div class="container-fluid">
......footer stuff
</div>
</div>
<!-- Footer End -->
<!-- Back to top button -->
<a href="#" class="btn back-to-top"><i class="fa fa-chevron-up"></i></a>
<!-- Pre Loader -->
<div id="loader" class="show">
<div class="loader"></div>
</div>
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script>//....some script</script>
</body>
<style>
.brands {
width: 100%;
padding-top: 90px;
padding-bottom: 90px
}
.brands_slider_container {
height: 130px;
border: solid 1px #e8e8e8;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
padding-left: 97px;
padding-right: 97px;
background: #fff
}
.brands_slider {
height: 100%;
}
.brands_item {
height: 150px;
width: 100px;
}
.brands_item img {
width: 50px;
height: 85px;
}
.brands_nav {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
padding: 5px;
cursor: pointer
}
.brands_nav i {
color: #e5e5e5;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease
}
.brands_nav:hover i {
color: #676767
}
.brands_prev {
left: 40px;
}
.brands_next {
right: 40px
}
</style>
</html>
如果它有很多代码,请原谅我,但我想尽快托管这个应用程序,因为我已经支付了托管费用。
body {
color: #797979;
background: #ffffff;
font-family: 'Montserrat', sans-serif;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #414141;
}
a {
color: #313131;
transition: .3s;
}
a:hover,
a:active,
a:focus {
color: #009FF9;
outline: none;
text-decoration: none;
}
.btn:focus,
.form-control:focus {
box-shadow: none;
}
.container-fluid {
max-width: 1366px;
}
.btn {
padding: 12px 25px;
font-size: 14px;
font-weight: 600;
letter-spacing: 1px;
color: #ffffff;
background: #009FF9;
border: 2px solid transparent;
border-radius: 0;
box-shadow: inset 0 0 0 50px #009FF9;
transition: ease-out 0.3s;
-webkit-transition: ease-out 0.3s;
-moz-transition: ease-out 0.3s;
}
.btn:hover {
color: #009FF9;
background: transparent;
box-shadow: inset 0 0 0 0 #009FF9;
border-color: #009FF9;
}
#loader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .3s ease-out, visibility 0s linear .3s;
-o-transition: opacity .3s ease-out, visibility 0s linear .3s;
transition: opacity .3s ease-out, visibility 0s linear .3s;
z-index: 999;
}
#loader.show {
-webkit-transition: opacity .6s ease-out, visibility 0s linear 0s;
-o-transition: opacity .6s ease-out, visibility 0s linear 0s;
transition: opacity .6s ease-out, visibility 0s linear 0s;
visibility: visible;
opacity: 1;
}
#loader .loader {
position: relative;
width: 45px;
height: 45px;
border: 5px solid #dddddd;
border-top: 5px solid #009FF9;
border-radius: 50%;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.back-to-top {
position: fixed;
display: none;
width: 44px;
height: 44px;
padding: 8px 0;
text-align: center;
line-height: 1;
font-size: 22px;
right: 15px;
bottom: 15px;
z-index: 9;
border-radius: .3em;
}
.back-to-top i {
color: #ffffff;
}
.back-to-top:hover i {
color: #414141;
}
/*********** Nav Bar CSS **********/
.navbar {
position: relative;
transition: .5s;
z-index: 999;
}
.navbar.nav-sticky {
position: fixed;
top: 0;
width: 100%;
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}
.navbar .navbar-brand {
margin: 0;
font-size: 45px;
line-height: 0px;
font-weight: 700;
letter-spacing: 2px;
transition: .5s;
}
.navbar .navbar-brand img {
max-width: 100%;
max-height: 40px;
}
.navbar .dropdown-menu {
margin-top: 0;
border: 0;
border-radius: 0;
background: #f8f9fa;
}
/********** Hero CSS ***********/
.hero {
position: relative;
width: 100%;
margin-bottom: 45px;
padding: 120px 0 0 0;
overflow: hidden;
background: linear-gradient(#009FF9, #ffffff), url(../img/hero-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.hero .container-fluid {
padding: 0;
}
.hero .hero-image {
position: relative;
/* text-align: right; */
/* padding-right: 75px; */
padding-right: 4em;
}
.hero .hero-image img {
}
.hero .hero-content {
margin-top: -12em;
position: relative;
padding-left: 75px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
}
.hero .hero-text p {
color: #ffffff;
font-size: 25px;
font-weight: 600;
margin-bottom: 15px;
}
.hero .hero-text h1 {
color: #ffffff;
font-size: 60px;
font-weight: 700;
letter-spacing: 3px;
margin-bottom: 15px;
}
.hero .hero-text h2 {
display: inline-block;
margin: 0;
height: 35px;
color: #ffffff;
font-size: 35px;
font-weight: 600;
}
.hero .hero-text .typed-text {
display: none;
}
.hero .hero-text .typed-cursor {
font-size: 35px;
font-weight: 300;
color: #ffffff;
}
.hero .hero-btn .btn {
margin-top: 35px;
color: #009FF9;
background: #ffffff;
box-shadow: inset 0 0 0 50px #ffffff;
border-radius: .3em;
}
.hero .hero-btn .btn:hover {
color: #ffffff;
background: transparent;
box-shadow: inset 0 0 0 0 #ffffff;
border-color: #ffffff;
}
.hero .hero-btn .btn:first-child {
margin-right: 10px;
}
/******* Section Header ********/
.section-header {
position: relative;
margin-bottom: 45px;
}
.section-header p {
display: inline-block;
margin: 0 30px;
margin-bottom: 10px;
padding-left: 15px;
position: relative;
font-size: 16px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
background: #ffffff;
}
.section-header p::before {
position: absolute;
content: "";
height: 3px;
top: 11px;
right: 0;
left: -30px;
background: #009FF9;
z-index: -1;
}
.section-header p::after {
position: absolute;
content: "";
width: 3px;
height: 3px;
top: 11px;
left: 3px;
background: #009FF9;
z-index: 1;
}
.section-header h2 {
margin: 0;
position: relative;
font-size: 45px;
font-weight: 700;
}
/********** About CSS **********/
.about {
position: relative;
width: 100%;
margin: -45px 0 45px 0;
}
.about .col-lg-6 {
padding: 0;
}
.about .section-header {
margin-bottom: 30px;
}
.about .about-img {
position: relative;
height: 100%;
}
.about .about-img img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.about .about-content {
padding: 0 60px;
}
.about .about-text p {
font-size: 16px;
}
.about .skills {
margin-bottom: 30px;
}
.about .skill-name {
margin-top: 15px;
}
.about .skill-name p {
display: inline-block;
margin-bottom: 5px;
font-size: 16px;
font-weight: 400;
}
.about .skill-name p:last-child {
float: right;
}
.about .progress {
height: 10px;
border-radius: 10px;
background: #dddddd;
}
.about .progress .progress-bar {
width: 0px;
background: #009FF9;
border-radius: 10px;
transition: 2s;
}
.about .about-text a.btn {
margin-top: 15px;
}
/******* Experience CSS ********/
.experience {
position: relative;
padding: 45px 0 15px 0;
}
.experience .timeline {
position: relative;
width: 100%;
}
.experience .timeline::after {
content: '';
position: absolute;
width: 2px;
background: #009FF9;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1px;
}
.experience .timeline .timeline-item {
position: relative;
background: inherit;
width: 50%;
margin-bottom: 30px;
}
.experience .timeline .timeline-item.left {
left: 0;
padding-right: 30px;
}
.experience .timeline .timeline-item.right {
left: 50%;
padding-left: 30px;
}
.experience .timeline .timeline-item::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 48px;
right: -8px;
background: #ffffff;
border: 2px solid #009FF9;
border-radius: 16px;
z-index: 1;
}
.experience .timeline .timeline-item.right::after {
left: -8px;
}
.experience .timeline .timeline-item::before {
content: '';
position: absolute;
width: 0;
height: 0;
top: 46px;
right: 10px;
z-index: 1;
border: 10px solid;
border-color: transparent transparent transparent #dddddd;
}
.experience .timeline .timeline-item.right::before {
left: 10px;
border-color: transparent #dddddd transparent transparent;
}
.experience .timeline .timeline-date {
position: absolute;
width: 100%;
top: 44px;
font-size: 16px;
font-weight: 600;
color: #009FF9;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 1;
}
.experience .timeline .timeline-item.left .timeline-date {
text-align: left;
left: calc(100% + 55px);
}
.experience .timeline .timeline-item.right .timeline-date {
text-align: right;
right: calc(100% + 55px);
}
.experience .timeline .timeline-text {
padding: 30px;
background: #ffffff;
position: relative;
border-right: 5px solid #dddddd;
box-shadow: 0 0 60px rgba(0, 0, 0, .08);
}
.experience .timeline .timeline-item.right .timeline-text {
border-right: none;
border-left: 5px solid #dddddd;
}
.experience .timeline .timeline-text h2 {
margin: 0 0 5px 0;
font-size: 22px;
font-weight: 600;
}
.experience .timeline .timeline-text h4 {
margin: 0 0 10px 0;
font-size: 16px;
font-style: italic;
font-weight: 400;
}
.experience .timeline .timeline-text p {
margin: 0;
font-size: 16px;
}
/********* Service CSS *********/
.service {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.service .service-item {
position: relative;
margin-bottom: 30px;
display: flex;
align-items: center;
box-shadow: inset 0 0 0 0 transparent;
transition: ease-out 0.5s;
}
.service .service-item:hover {
box-shadow: inset 800px 0 0 0 #009FF9;
}
.service .service-icon {
position: relative;
width: 150px;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #009FF9;
background: #ffffff;
}
.service .service-icon i {
position: relative;
font-size: 60px;
color: #009FF9;
transition: .3s;
}
.service .service-item:hover i {
font-size: 75px;
}
.service .service-text {
position: relative;
width: calc(100% - 120px);
padding: 0 30px;
}
.service .service-text h3 {
margin-bottom: 10px;
font-size: 20px;
font-weight: 600;
transition: 1s;
}
.service .service-text p {
margin: 0;
font-size: 16px;
transition: 1s;
}
/******** Portfolio CSS ********/
.portfolio {
position: relative;
padding: 45px 0 15px 0;
}
.portfolio #portfolio-filter {
padding: 0;
margin: -15px 0 25px 0;
list-style: none;
font-size: 0;
text-align: center;
}
.portfolio #portfolio-filter li {
cursor: pointer;
display: inline-block;
margin: 5px;
padding: 6px 12px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
background: #009FF9;
border: 2px solid transparent;
border-radius: 0;
box-shadow: inset 0 0 0 50px #009FF9;
transition: ease-out 0.3s;
-webkit-transition: ease-out 0.3s;
-moz-transition: ease-out 0.3s;
}
.portfolio #portfolio-filter li:hover,
.portfolio #portfolio-filter li.filter-active {
color: #009FF9;
background: transparent;
box-shadow: inset 0 0 0 0 #009FF9;
border-color: #009FF9;
}
.portfolio .portfolio-item {
position: relative;
}
.portfolio .portfolio-wrap {
position: relative;
width: 100%;
}
.portfolio .portfolio-img {
position: relative;
overflow: hidden;
}
.portfolio .portfolio-img img {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.1);
transition: .5s;
}
.portfolio .portfolio-item:hover img {
margin-left: 15px;
}
.portfolio .portfolio-text {
position: relative;
height: 60px;
width: calc(100% - 30px);
margin: -30px 15px 30px 15px;
display: flex;
align-items: center;
background: #ffffff;
box-shadow: 0 0 15px rgba(0, 0, 0, .12);
}
.portfolio .portfolio-text h3 {
width: calc(100% - 70px);
font-size: 18px;
font-weight: 600;
margin: 0 0 0 15px;
white-space: nowrap;
overflow: hidden;
}
.portfolio .portfolio-text a.btn {
width: 50px;
height: 50px;
padding: 0 0 2px 1px;
display: flex;
align-items: center;
justify-content: center;
font-size: 45px;
font-weight: 100;
border-radius: .1em;
}
.portfolio .portfolio-item:hover a.btn {
color: #009FF9;
background: transparent;
box-shadow: inset 0 0 0 0 #009FF9;
border-color: #009FF9;
}
/********* Banner CSS **********/
.banner {
position: relative;
width: 100%;
margin: 45px 0;
padding: 90px 0;
background: #009FF9;
}
.banner .container {
max-width: 750px;
text-align: center;
}
.banner .section-header {
margin-bottom: 20px;
}
.banner .section-header p {
color: #414141;
background: transparent;
}
.banner .section-header p::after {
display: none;
}
.banner .section-header h2 {
color: #ffffff;
}
.banner .section-header h2 span {
color: #414141;
font-size: 50px;
}
.banner .banner-text p {
font-size: 18px;
color: #ffffff;
}
.banner .banner-text .btn {
margin-top: 15px;
color: #009FF9;
background: #ffffff;
box-shadow: inset 0 0 0 50px #ffffff;
border-radius: .3em;
}
/********* Pricing CSS *********/
.price {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.price .row {
padding: 0 15px;
}
.price .col-md-4 {
padding: 0;
}
.price .price-item {
position: relative;
margin-bottom: 30px;
background: #ffffff;
}
.price .featured-item {
box-shadow: 0 0 30px rgba(0, 0, 0, .2);
z-index: 1;
border-radius: .3em;
}
.price .price-header,
.price .price-body,
.price .price-footer {
position: relative;
text-align: center;
}
.price .price-header {
padding: 45px 0 30px 0;
color: #414141;
}
.price .price-item.featured-item .price-header {
color: #009FF9;
}
.price .price-title h2 {
font-size: 25px;
font-weight: 400;
text-transform: uppercase;
}
.price .price-prices h2 {
font-size: 45px;
font-weight: 700;
margin-left: 10px;
}
.price .price-prices h2 small {
position: absolute;
font-size: 18px;
font-weight: 400;
margin-top: 9px;
margin-left: -12px;
}
.price .price-prices h2 span {
margin-left: 1px;
font-size: 18px;
font-weight: 400;
}
.price .price-item.featured-item h2 {
color: #009FF9;
}
.price .price-body {
padding: 0 0 20px 0;
}
.price .price-description ul {
margin: 0;
padding: 0;
list-style: none;
}
.price .price-description ul li {
padding: 0 0 20px 0;
}
.price .price-item .price-action {
padding-bottom: 45px;
}
.price .price-item .price-action .btn {
color: #ffffff;
background: #414141;
box-shadow: inset 0 0 0 50px #414141;
border-radius: .3em;
}
.price .price-item .price-action .btn:hover {
color: #414141;
background: transparent;
box-shadow: inset 0 0 0 0 #414141;
border-color: #414141;
}
.price .price-item.featured-item .price-action .btn {
color: #ffffff;
background: #009FF9;
box-shadow: inset 0 0 0 50px #009FF9;
border-radius: .3em;
}
/*********** Team CSS **********/
.team {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.team .team-item {
position: relative;
background: #ffffff;
margin-bottom: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
box-shadow: inset 0 0 0 0 transparent;
transition: ease-out 0.5s;
border-radius: .3em;
}
.team .team-img {
position: relative;
width: 50%;
overflow: hidden;
border-radius: .3em;
}
.team .team-img img {
position: relative;
width: 100%;
transition: .5s;
}
.team .team-text {
position: relative;
width: 50%;
padding: 0 30px;
}
.team .team-text h2 {
color: #009FF9;
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
transition: 1s;
}
.team .team-text h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
transition: 1s;
}
.team .team-text p {
margin-bottom: 20px;
transition: 1s;
}
.team .team-social {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
}
.team .team-social a.btn {
width: 35px;
height: 35px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: normal;
margin-right: 5px;
border-radius: .2em;
}
.team .team-item:hover {
box-shadow: inset 800px 0 0 0 #009FF9;
}
.team .team-item:hover .team-img img {
transform: scale(1.2);
}
.team .team-item:hover .team-text h2,
.team .team-item:hover .team-text h4,
.team .team-item:hover .team-text p {
color: #ffffff;
}
.team .team-item:hover .team-social a.btn {
background: #ffffff;
}
.team .team-item:hover .team-social a.btn:hover {
border-color: #ffffff;
}
/******* Testimonial CSS *******/
.testimonial {
position: relative;
margin: 45px 0;
padding: 90px 0;
background: #009FF9;
}
.testimonial .container {
max-width: 900px;
}
.testimonial .testimonial-icon {
margin-bottom: 45px;
text-align: center;
}
.testimonial .testimonial-icon i {
font-size: 60px;
color: rgba(256, 256, 256, .5);
}
.testimonial .testimonial-item {
position: relative;
margin: 0 15px;
text-align: center;
}
.testimonial .testimonial-img {
position: relative;
margin-bottom: 15px;
z-index: 1;
}
.testimonial .testimonial-item img {
margin: 0 auto;
width: 120px;
padding: 10px;
/* border: 5px dotted #ffffff; */
/* border-radius: 100px; */
}
/********* Contact CSS *********/
.contact {
position: relative;
width: 100%;
margin: 45px 0;
background: #ffffff;
}
.contact .container-fluid {
background: url(../img/mail.png) left center no-repeat;
background-size: contain;
}
.contact .contact-form {
position: relative;
padding: 90px 0 90px 45px;
background: #ffffff;
}
.contact .contact-form input {
color: #8d8d8d;
padding: 15px 0;
background: none;
border-radius: 0;
border: none;
border-bottom: 1px solid #8d8d8d;
}
.contact .contact-form textarea {
color: #5a5151;
height: 90px;
padding: 15px 0;
background: none;
border-radius: 0;
border: none;
border-bottom: 1px solid #8d8d8d;
}
.contact .contact-form .form-control::placeholder {
color: #747474;
opacity: 1;
}
.contact .contact-form .form-control:-ms-input-placeholder,
.contact .contact-form .form-control::-ms-input-placeholder {
color: #8d8d8d;
}
/*********** Blog CSS **********/
.blog {
position: relative;
width: 100%;
padding: 45px 0 15px 0;
}
.blog .blog-item {
position: relative;
margin-bottom: 30px;
}
.blog .blog-img {
position: relative;
width: 100%;
overflow: hidden;
}
.blog .blog-img img {
width: 100%;
transition: .5s;
}
.blog .blog-item:hover img {
transform: scale(1.1);
}
.blog .blog-text {
position: relative;
padding: 30px;
border-right: 1px solid rgba(0, 0, 0, .07);
border-bottom: 1px solid rgba(0, 0, 0, .07);
border-left: 1px solid rgba(0, 0, 0, .07);
}
.blog .blog-text h2 {
font-size: 25px;
font-weight: 600;
}
.blog .blog-text p {
margin-bottom: 10px;
}
.blog .blog-item a.btn {
margin-top: 10px;
padding: 8px 15px;
}
.blog .blog-item a.btn i {
margin-left: 5px;
}
.blog .blog-meta {
position: relative;
display: flex;
margin-bottom: 15px;
}
.blog .blog-meta p {
margin: 0 10px 0 0;
font-size: 13px;
}
.blog .blog-meta i {
color: #414141;
margin-right: 5px;
}
.blog .blog-meta p:last-child {
margin: 0;
}
/********* Footer CSS **********/
.footer {
position: relative;
margin-top: 45px;
/* background: #009FF9; */
}
.footer .container-fluid {
padding: 60px 0 0 0;
}
.footer .footer-info {
position: relative;
width: 100%;
text-align: center;
}
.footer .footer-info h2 {
margin-bottom: 20px;
font-size: 30px;
font-weight: 700;
color: #ffffff;
}
.footer .footer-info h3 {
margin-bottom: 25px;
font-size: 22px;
font-weight: 600;
color: #ffffff;
}
.footer .footer-menu {
width: 100%;
display: flex;
justify-content: center;
}
.footer .footer-menu p {
color: #ffffff;
font-size: 22px;
font-weight: 600;
line-height: 20px;
padding: 0 15px;
border-right: 1px solid #ffffff;
}
.footer .footer-menu p:last-child {
border: none;
}
.footer .footer-social {
position: relative;
margin-top: 15px;
}
.footer .footer-social a {
display: inline-block;
}
.footer .footer-social a i {
margin-right: 15px;
font-size: 20px;
color: #ffffff;
transition: .3s;
}
.footer .footer-social a:last-child i {
margin: 0;
}
.footer .footer-social a:hover i {
color: #414141;
}
.footer .copyright {
position: relative;
text-align: center;
margin-top: 30px;
padding-top: 25px;
padding-bottom: 25px;
}
.footer .copyright::before {
position: absolute;
content: "";
width: 50%;
height: 1px;
top: 0;
left: 25%;
background: rgba(256, 256, 256, .2);
}
enter image description here
解决方案
谢谢大家,我只知道问题出在哪里,我将其添加到正文中
max-width: 100%;
overflow-x: hidden;
它解决了这个用户的问题
omma2289
推荐阅读
- python - 如何更改 __lt__ 魔法方法,以便该算法可以工作?- Python
- javascript - 调用函数对节点 js 错误 400 做出反应
- asp.net-core - 如何在支持 OData 查询的端点中解析 ODataQuery /ODataQueryOptions
- javascript - 为什么 find() 方法不显示 Express.Js 中 mongoDb 数据库中的最新数据
- c++ - 松散范围后如何保持线程运行
- kubernetes - 将客户端转发到 Ocelot 中的同一 SignalR 实例
- datetime - 在颤动中更改每个列表项的文本值
- html - Angular:检查是否提供了 ng-content 插槽之一
- python-3.x - 提取嵌套内容
标签与美丽的汤
- android - 我不能在 Android 7.1.2 中访问便携式/外部 SD 吗?它在 Android 4.4 上运行