无法使网站始终以不同的设备为中心,内容似乎向左倾斜



我正在帮助某人开发他们的网站,但由于缺乏自学经验/刚刚接管了另一位程序员的工作。当拿到网站时,它在移动设备上的状态更糟(太多的死区(,我似乎已经解决了,但这个居中的问题我还没能解决。

我正在使用Wordpress,为了使文本更加一致,我一直在摆弄CSS,但代码中有很多空白点。

代码:

.logged-in header .navbar-default {
top: 0px;
}

.toppa img:hover {
opacity: 0.3;
}

.feeder { 
width: 75%;
margin: 0 auto;
margin-top: 100px;
}

.bio {
padding-left: 8%;
padding-right: 8%;
}
.bio h3 {
text-align: center;
font-size: 2em;
}
.lillogo {
max-height: 35px;
width: auto;
margin-left: 90%;
}
.lillogox {
max-height: 20px;
width: auto;
margin-left: 90%;
}

.lillogo2 {
max-height: 50px;
width: auto;
margin-left: 90%;
}

.buttonup {
padding: 12px;
background-color: #efe4f1;
border-radius: 20px;
color: #000000;
margin-top: 16px;
}

.buttonup:hover {
padding: 12px;
background-color: #ffffff;
border-radius: 20px;
color: #000000;
margin-top: 16px;
}
.brander   {
font-weight: 800;
text-align: right;
}
.entry-meta {
display: none;
}
.transformer {
max-width: 60%;
margin: 0 auto;
font-weight: 800;
font-style: italicize;
font-size: 1.6em;
}

.row.CC {
padding-left: 15%;
padding-right: 15%;
}

h3 {
font-size: 1.4em;
margin: 0 0 10px 0;
}

.bloxx {
background: url('http://chrisrosenthaldesign.com/demos/wilyfoxx/wp-content/uploads/2021/04/bloxxbax-1.jpg');
}
.page-id-79 .CC p {
text-align: justify;
text-justify: inter-word;}

.hometexter {
margin-bottom: 40px;
line-height: 1.6em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
margin: 0 auto !important;
}

.page-id-194 h1 {
font-weight: 800;
text-transform: uppercase;
margin-bottom: 12px;
}
.starter {
padding-top: 150px;
text-align: center !important;
}



.page-id-194 .starter {
padding-top: 0px;
text-align: center !important;
}

.starter img {
height: auto !important;
max-height: 80px;

width: 100% !important;
}
.page-id-194 .starter h2 {
text-align: center !important;
}
.centaur  {
margin: 0 auto !important;
text-align: center !important;
}

.shrankit {
padding-left: 20%;
padding-right: 20%;
}
.ringer {
max-width: 90px;
}
.centaurer  {
margin: 0 auto !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
text-align: center !important;
}

.page-id-97 {
text-align: center;
}
.row {
width: 100%;
}
.highlighter {
text-align: center;
font-size: 1.4em;
line-height: 1.8em;
}
.sb_instagram_header, .sbi_load_btn {
display: none !important;
}
body.mob-menu-overlay, body.mob-menu-slideout, body.mob-menu-slideout-over, body.mob-menu-slideout-top {
padding-top: 0px;
}

hr {
width: 100%;
height:1vh;
color: #d4bce4;
}

.page-id-93 .rowtwo h2,
.page-id-79 .rowtwo h2,
.rowthree h2,
.rowfour h2 {
text-align: center !important;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
}

h4 {
border-bottom: 0px;
color: #ffffff;
font-weight: bold;
width: 100% ;
margin-bottom: 10px !important;
}

.spanner h2 {
text-align: center;
margin: 0 auto;
}

.page-id-103 .spanner h2 {
font-size: 1.6em;
font-weight: 800;
}

.spanner  {
line-height: 1.8em !important;
text-align: center;
background-color: #efe4f1;
color: #000000;
PADDING: 20PX;
font-weight: 800;
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}


.logos  {
border-top: 20px solid #efe4f1;
border-bottom: 20px solid #efe4f1;
margin-top: 50px;    
margin-bottom: 220px;    

}
.page-id-97 .spanner h2 {
line-height: 1.8em !important;
text-align: left;
}

.page-id-97 .rowtwo h2 {
line-height: 1.8em !important;
text-align: center !important;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
font-weight: 800;}



.page-id-97 .centaur  {
margin: 0 auto !important;
text-align:  center !important;
}

h3 {
width: 100% ;
line-height: 1.6em;
}

.page-id-103 h3 {
text-align: center;
}

.page-id-103 .rowtwo {
padding: 0px;
padding-top: 0px;
background-color: #000000;
}

.page-id-103 .subb h3 {
text-align: center !important;
margin-top: 46px !important;
}
.page-id-194 .rowtwo h2 {
text-align: center !important;
margin: 0 auto !important;
margin-top: 30px !important;
margin-bottom: 40px !important;
font-weight: bold;
}

header .logo-tag img{
max-height: 40px;
margin-top: 12px;
margin-left: 22px;
width: auto;
}

header .logo-tag {
float: left !important;
position: fixed;
top: 0px;
left: 0px;
z-index: 9;
}
.navbar-nav > ul {
list-style: none !important;
}


.subb img {
width: 66%;
padding-top: 32px;
}

.subbbb img {
width: 100%;
padding-top: 0px;
}


.subbbb h3 { 
margin-top: -6px;   
}

.navbar-nav > li {
float: left;
height: 100px;
display: inline !important;
}

.navbar-nav  {
background-color: #000000;
}
#mega-menu-wrap-primary #mega-menu-primary {
position: fixed;
top: 0px;
left: 0px;
right: 0px !important;
background-color: #000000;

}

.quoter, .citer {
text-align: center;
width: 100%;
}

.quoter {
font-size: 2em;
}

.citer {
padding-bottom: 20px;
}

.row .testimonial {
border-bottom: 1px solid 000000 !important;

}
.socialbar {
position: relative;
text-align: center !important;
margin: 0 auto !important;
background-color: #000000;
color: #efe4f1;
z-index: 9;
}
.socialbar:hover {
color: rgb(191, 176, 201);
}

.socialbar {
text-align: right;
padding: 8px;
font-size: 2em;
}

#mobmenuleft .mob-expand-submenu, #mobmenuleft > .widgettitle, #mobmenuleft li a, #mobmenuleft li a:visited, #mobmenuleft .mobmenu-content h2, #mobmenuleft .mobmenu-content h3, .mobmenu-left-panel .mobmenu-display-name, .mobmenu-content .mobmenu-tabs-header li {
font-family: Open sans;
font-size: 1.3em;
font-weight: inherit;
font-style: normal;
line-height: 1.5em;
letter-spacing: normal;
text-transform: uppercase;
border-bottom: solid 1px #e9ebf5;
}

.mobmenu-content #mobmenuleft > li > a:hover {
background-color: rgb(191, 176, 201);
color: #666;
}


.main-search,
footer,
.scroll-top-wrapper,
.page-title {
display: none !important;
}

.interior {
width: 100% !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding-left: 9% !important;
padding-right: 9% !important;
overflow-x: hidden;
}

.container {
width: 100% !important;
max-width: 100% !important;
margin: 0% auto !important;
padding-left: 0% !important;
padding-right: 0% !important;
float:center;
overflow-x: hidden;
}



.spacer {
margin-left: 0px !important;
margin-right: 0px !important; 
padding-top: 55px;
padding-bottom: 20px;
background-color: #000000;
}

.footers {
background-color: #000000;
padding-left: 0px !important;
padding-right:  0px !important;
padding-bottom:  0px !important;
padding-top:  40px !important;
text-align: center;
color: #f1f1f1;
}

section.footers {
background-color: #000000 !important;
}
.footers .col-sm-6,
.footers .col-md-6,
.footers .col-sm-3 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100%;
}


.xer  {
width: 60px;
margin-top: 8px;
}

.mailer  {
width: 40px;
margin-top: 12px;
margin-bottom: 12px;
}

body {
font: 'Montserrat',sans-serif;
color: #cccccc;
background-color: #000000;
margin-top: 55px;
letter-spacing: 1px;
float:center;
width:100%;
}


#animated-example { 

}

.animated { 
animation-duration: 1s; 
animation-fill-mode: both; 
animation-timing-function: ease-in; 
animation-delay: 1s;
width: 100%;
padding-left: 20%;
padding-right: 20%;
} 

.animated2 { 
animation-duration: 1s; 
animation-fill-mode: both; 
animation-timing-function: ease-in; 
animation-delay: 2s;
width: 100%;
text-align: center;

} 




@keyframes fadeIn { 
0% {opacity: 0;} 
100% {opacity: 1;} 
} 
.fadeIn { 
animation-name: fadeIn; 
}



.topprow {
padding: 0px;
padding-top: 12%;
background-color: #000000;
min-height: 10vh;
}


.statement {
text-align: center;
padding-top: 0px;
font-size:1.0vw;
padding-bottom: 0px;
background-color: #000000;
margin-top:-2.5vh;


}

.statement h2 {
text-align: center;
margin: 0 auto;
font-size: 5.0vh;
font-size:3.5vw;
margin-bottom: 0px;
margin-top:-4.5vh;
font-variant:small-caps;

}

.rowone, .rowtwo, .rowthree, .rowfour {
padding:0px;
margin:0px;
}

.rowtwo .row {
padding-left: 9%;
padding-right: 9%;
}


.page-id-93 .rowtwo .row {
padding-left: 2%;
padding-right: 2%;
}


.rowthree .col {
}

.rowtwo {
padding: 0px;
padding-top: 80px;
background-color: #000000;
}

.centerer h3 {
text-align: center !important;
}
.subtext {
text-align: center;
margin-bottom: 40px;
}

.rowthree {
padding: 20px;
padding-left: 5%;
padding-right: 5%;
background-color: #000000;
}

.page-id-6 .rowthree {
text-align: center;
}


.page-id-97  h1 {
text-align: center !important;
margin: 0 auto;

}



a, a:visited {
color: #efe4f1;
text-decoration: none;
}


a:hover {
color: rgb(191, 176, 201);
text-decoration: none;
}


.buttoner {
border: 1px solid rgb(220, 204, 232);
padding: 10px 30px 10px 30px;
color: rgb(220, 204, 232) !important;
}


.buttoner:hover {
border: 1px solid rgb(191, 176, 201);
color: rgb(191, 176, 201);
}


#sb_instagram .sbi_follow_btn a {
background:  #C5BEE9;
color: #000000;
font-family: 'montserrat', sans-serif;
font-weight:500;
font-size:1.5vw;
font-variant:small-caps;

}
#sb_instagram .sbi_follow_btn a:hover {
background: rgb(191, 176, 201) !important;
color: #fff;
}


.blurb {
margin-bottom: 12px;
}


.rowfour {
text-align: center;
background-color: #000000;
padding: 40px;

}

.col {
min-width: auto;
}

#mobmenuright li a, #mobmenuright li a:visited, #mobmenuright .mobmenu-content h2, #mobmenuright .mobmenu-content h3, .mobmenu-left-panel .mobmenu-display-name {
font-family: Open Sans;

}
.object-fit_cover { 
object-fit: cover;
height: 100%;
min-height: 1400px;
}


.page-id-79 .flip-card-front {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
font-size: 0.9em;
line-height: 2.4em;
text-align: center !important;
margin: 0px !important;
}


.kcd,
.lrh {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
overflow-y: hidden;
}

.kcd.flip-card-back,
.lrh.flip-card-back {
padding: 0px !important;
}
.flip-card {
background-color: transparent;
height: 240px !important;
perspective: 1000px;
margin-bottom: 20px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-card-front {
background-color: #161616;
color: #ffffff;
border: 4px solid #bfb0c9;
}

.flip-card-front {
padding-top: 60px;
padding-left: 20px;
padding-right: 20px;
font-size: 1.6em;
text-align: center !important;
margin: 0px !important;
}

.flip-card-back { 
font-weight: 800;
}
.AA .flip-card-back {
background-color: #efe4f1;
color: #161616;
transform: rotateY(180deg);
padding: 20px;
line-height: 1.4em;
padding: 10%;

}
.flip-card-back  {


}

.BB .flip-card-back {
background-color: #efe4f1;
color: #161616;
transform: rotateY(180deg);
padding: 10px;
line-height: 1.4em;
padding-top: 30px;

}

.CC .flip-card-back {
background-color: #efe4f1;
color: #161616;
transform: rotateY(180deg);
padding: 10px;
line-height: 1.4em;
padding-top: 30px;

}


.CCC .flip-card-back {
background-color: #838383;
color: white;
transform: rotateY(180deg);
padding: 40px;
line-height: 1.4em;
padding-top: 30px;

}

.page-id-93 {
text-align: center !important;
}
.page-id-79 .testimonials {
text-align: center !important;

}



.page-id-79 .flip-card {
width: 100%;
height: 900px;
perspective: 1000px;
margin-bottom: 20px;
}

.page-id-79 .flip-card-inner {
position: relative;
width: 100%;
height: 900px;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.page-id-79 .flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

}

.page-id-79 .flip-card-back {
background-color: #efe4f1;
color: black;
}






@media only screen and (max-width: 1024px) {
.mob-retina-logo {
height: 49px!important;
}


.socialbar {
text-align: right;
padding: 4px;
font-size: 1.3em;
}


}

@media only screen and (max-width: 780px) {


}

@media only screen and (max-width: 480px) {
.mob-retina-logo {
height: 49px!important;
}

.col {
min-width: 100%;
}

body {
font-family: 'Montserrat',sans-serif;
color: #cccccc;
background-color: #f9f9fb;
margin-top: 55px;
letter-spacing: 1px;

}
header .logo-tag img{
max-height: 45px;
width: auto;
}

.navbar-toggle {
position: fixed;
right: 12px;
top: 1px;

}
.navbar {
min-height: 50px;
height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;

}
.navbar-toggle {
position: fixed;
right: 12px;
top: 1px;

}
.navbar {
min-height: 50px;
height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;

}


.socialbar {
position: relative !important;
left: 0px;
right: 0px !important;
z-index: 9;
}

.socialbar {
text-align: right;
padding: 4px;
font-size: 1.3em;
}

.page-id-79 .flip-card {
background-color: transparent;
width: 100%;
height: 1000px;
perspective: 1000px;
margin-bottom: 20px;
}

.page-id-79 .flip-card-front {
padding-top: 60px;
padding-left: 20px;
padding-right: 20px;
font-size: 0.7em;
line-height: 1.6em;
text-align: center !important;
margin: 0px !important;
}
.flip-card-front {
padding-top: 80px;
padding-left: 20px;
padding-right: 20px;
font-size: 1.3em;
text-align: center !important;
margin: 0px !important;
}
h1 {
font-size: 2.1em;
text-align:center;
}

h2 {
font-size: 1.8em;
font-variant: small-caps;

}

h3 {
font-size: 1.4em;
margin: 0 0 10px 0;
}

h4 {
font-variant small-caps;
text-align:center;
margin: 0 auto;
line-height:1em;
font-size:2.2em;
margin-top:-200px;
}

.page-id-97 .rowtwo h2 {
font-size: 1.6em;
line-height: 1.4em !important;
}


.rowtwo {
padding: 0px;
padding-top: 0px;
background-color: #000000;
}

.statement h2 {
text-align: center;
margin: 0 auto;
line-height: 1.6em;
font-size: 2.4em;

}



}
<div="aligncenter"><div class="container-fluid topprow">
<div class="row">
<div id="animated-example" class="animated fadeIn toppa"><a href="#jump"><img src="http://www.wilyfoxx.com/wp-content/uploads/2021/03/wilyfoxxlogoreversed1a.png" alt="" width="max" height="max" class="aligncenter size-full wp-image-167" /></a></div>
&nbsp;
</div>
</div>

<hr>
<div class="container-fluid statement">
<div class="row" >
<h2><big><h1 style><bold>a modern agency</h1></big>
for the people, the brands, and the institutions
changing the world

<img src="http://www.wilyfoxx.com/wp-content/uploads/2021/01/wilytopp.jpg" alt="" width="max" height="max" align="center" id="start"/></h2>



<div class="container-fluid rowthree">



<div class="row feeder">
[instagram-feed]

</div>
</div>
</div>

如果能在这方面提供任何帮助,我将不胜感激,我觉得我快疯了,已经试了好几天了!

不清楚您是否复制错误,或者错误可能在源代码中。

第一个div写错了,应该是<div class="aligncenter">而不是CCD_ 2。在css中,您还有aligncenter属性,当您修复该属性时,该属性将应用于该div。

如果错误在代码中,请尝试修复它。

最新更新