css - chrome 上的元素更改位置 (css)

Question

我试图在 chrome 上兼容此模板，主要问题是每次我刷新页面时，元素都会改变位置这是网站 zygi.loginet.gr，它在 mozilla 上运行良好。

/* reset/default rules */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, acronym, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, thead, tr, th, td {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: 'open_sansregular';
}
blockquote, q {
    quotes: none;
}
:focus {
    outline: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img, :link img, :visited img {
    border: 0;
}
img {
    max-width: 100%;
    height: auto;
}
q:before, q:after, blockquote:before, blockquote:after {
    content: "";
}
a, .inputbox {
    outline-width:0;
}
a {
    /*transition: all 0.5s ease;*/
    text-decoration: none;
    color: #90AF63;
}
a:hover {
    color: #B1BC42;
    text-decoration: none;
}
body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    background: #fff;
    color: #777;
}
html {
    height:100%;
    width:100%;
}
p {
    font-size: .9em;
    font-weight: 400;
    line-height: 1.8;
}
.block {
    display: inline-block;
    width: 100%;
    padding: 2.5em 0;
}
.block-clients {
    background-color: #f6f6f6;
    display: inline-block;
    width: 100%;
    padding: 2.5em 0;
}
.block-clients h3 {
    font-size: 2em;
    font-weight: 300;
    letter-spacing: -1px;
    padding-bottom: 1em;
    text-align: center;
}
.block-services {
    display: inline-block;
    width: 99%;
    padding: .5em 0 1.5em 0;
}
.innerBlock, .contentTop .vendor-store-desc p, .contentTop .vendor-store-desc .page-header, .contentTop .topten-view, .contentTop .category-view .row {
    max-width: 1210px;
    margin: 0 auto;
}
/* /reset/general rules */

/*---------------------------------------------------------------------------------------*/

/* base typography */
h1{ font-size: 1.6em }
h2{ font-size: 1.4em; line-height: 1.4em; }
h3{ font-size: 1.3em }
h4{ font-size: 1.2em }
h5{ font-size: 1.1em }
h6{ font-size: 1em }
/* /base typography */

/* buttons */
button, .button, .btn, .btn-primary, #input .button {
    padding: .3em 1em;
    color: #fff;
    border-radius: 2px;
    margin-top: .5em;
    transition: all .2s linear;

}
input.button:not([type="checkbox"]) {
    border-top: none;
    border-right: none;
    border-left: none;
    color: #fff;
}
a.button{
    display: inline-block;
}
/* colors for diferent buttons */
.button.common {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .65);
}
.button.common:hover, .button.common:focus {
    border: 2px solid rgba(255, 255, 255, 1);
}

/* /colors for diferent buttons */

.form-actions {
    background: none;
}

/* slider / bg image */
.slider {
    background-image: url(../images/mainIntroImg.jpg);
    margin-top: -3px;
    padding: 2em 0;
    position: relative;
    text-align: center; 
    line-height: 2.4em;
    color: #fff;
    background-size: auto;
}
.slider .innerBlock > .moduletable {
    background: url(../images/sliderInnerBg.png) no-repeat bottom right;
}
.slider a {
    display: inline-block;
    color: #fff;
}
.slider a:hover {
    color: #cdcdcd;
}
.slider h1 {
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 2.5em;
    font-weight: bold;
    padding: 3% 0 2% 0;
    text-align: left;
    width: 50%;
}
.slider p {
    font-size: 1.4em;
    font-weight: 100;
    line-height: 1.8em;
}
.slider-content {
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
    text-shadow: 5px 5px 10px #888;
}
.slider-content-desc {
    width: 53%;
}
ul.slider-services {
    background: rgba(125, 167, 217, .7);
    padding: 29.5px 2%;
    width: 48.6%;
}
ul.slider-services li {
    display: inline-block;
}
ul.slider-services li::after {
    content: "//";
    color: #B4A16D;
    text-shadow: 0px 1px 1px #333;
    padding: 0 4px;
}
.blog .item {
    text-align: center;
    transition: all .2s linear;
    margin: 1em 1%;
    padding: 1em 0;
}
.blog .item:hover, .services ul li:hover {
    background: #eee;
}
.blog .item h2 {
    font-size: 1em;
}
.blog .item-image.pull-left {
    float: none;
}
.blogPreview .servicesImg {
    text-align: center;
}
.services ul li, .contentCustomers ul li, .blogPreview ul li {
    padding: .25%;
    margin: 0 .25%;
    text-align: center;
    display: inline-block;
    vertical-align: top;
}
.services ul li {
    width: 23.7%;
    transition: all .2s linear;
    padding-bottom: .5em;
}
.blogPreview ul li {
    width: 23.7%;
    transition: all .2s linear;
    padding-bottom: .5em;
}
.contentCustomers ul li {
    width: 15.3%;
}
.servicesImg, .blogPreview ul li > img {
    display: inline-block;
    width: 100%;
    transition: .2s linear all;
    border-radius: 50%;
}
.blogPreview .servicesImg img, .logiBlog .leadingArt > .item-image img {
    /*max-height: 171px;*/
    max-width: 100%;
    height: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
.blogPreview li:hover .servicesImg img {
    border: 1px solid #999;
}
.mod-articles-category-title {
    color: #343433;
    transition: color 0.2s linear 0s;
    line-height: 1em;
    padding: .3em 0;
    margin-bottom: .4em;
    display: inline-block;
}
a.mod-articles-category-title:hover {
    color: #71A45B;
}
p.mod-articles-category-introtext{
    font-size: .9em;;
    font-weight: 400;
    line-height: 1.6;
    min-height: 6.3em;
}
.services .mod-articles-category-title {
    font-size: 1.3em;
}
/* /services */

/* blogPreview */
.blogPreview li a, .blogPreview li span {
    text-align: left;
    display: inline-block;
    width: 100%;
}
.blogPreview a.mod-articles-category-title  {
    color: #6190be;
    font-size: .9em;
    line-height: 1.2em;
    font-weight: 700;
}
.blogPreview a.mod-articles-category-title:hover {
    color: #444;
}
.blogPreview .mod-articles-category-date {
    font-size: .8em;
}
/* /blogPreview */

/* content blocks and particular (.)block - sections styling */
.contentTop {
    padding: 0 0;
}
.xselling a, .xselling {
    color: #000;
    text-align: center;
}
..xselling a {
    margin: .2em 0;
}
.xselling {
    padding: 1em 0;
    float: left;
    border-top: 1px solid #000;
}
.page-header, .topten-view h4, .xselling h3 {
    font-size: 1.8em;
    font-weight: 300;
    letter-spacing: -1px;
    text-align: center;
    padding: 0;
    border: none;
    position: relative;
}



.page-header, .topten-view h4 {
    margin: 2em auto!important;
}
.page-header h2  {
    display: inline;
    line-height: 0;
    padding: 0 .5em;
}
.topten-view h4:before, .topten-view h4:after, .xselling h3:before, .xselling h3:after {
    background: #90AF5F;
}
.page-header:before, .page-header:after{
    background: #000;
}
.page-header:before, .page-header:after,
.topten-view h4:before, .topten-view h4:after,
.xselling h3:before, .xselling h3:after {
    content: "";
    display: block;
    width: 30%;
    height: 2px;
    position: absolute;
    top: 40%;
}
.page-header:before,
.topten-view h4:before,
.xselling h3:before {
    left: 0;
}
.page-header:after,
.topten-view h4:after,
.xselling h3:after {
    right: 0;
}
.block h3 {
    font-size: 2em;
    font-weight: 300;
    letter-spacing: -1px;
    text-align: center;
    padding-bottom: .5em;
}
.pxBg {
    background-attachment: fixed;
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: cover;
}
.whiteTrans {
    background: rgba(255,255,255,.45);
    padding: 2.5em 0;
    text-align: center;
}
.vendor-store-desc {
    background-image: url(../images/shopBg.jpg);
    margin: 0;
    color: #000;
}
.communication {
    background: #6190BE;
    text-align: center;
    display: inline-block;
    margin: auto;
    width: 100%;
    padding: 2% 0;
}
.communicationCont {
    display: inline-block;
    margin: auto;
    width: 48%;
}
.communicationText {
    display: block;
    margin: auto;
    color: #fff;
    font-size: 2em;
    line-height: 2em;
}
.communicationImg {
    display: block;
    float: left;
}
.communicationImg img {
}
.bgContThree, .contentHeader {
    background-image: url(../images/logiPxBg1.jpg);
    color: #fff;
    font-size: 1.4em;
    line-height: 1.2em;
}
.bgContThree {
    background: #6190BE;
}
/* content blocks and particular (.)block - sections styling */

/* preFooter */
.preFooter {
    background: #6190be;
    color: #fff;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.6em;
    font-style: italic;
    margin-bottom: -4px;
}
.preFooter img {
    vertical-align: middle;
}
/* pre foter quote + contnent header*/
.bottomQuote {
    color: #fff;
}
.contentHeader, .bottomQuote {
    text-align: center;
}
.contentHeader h1 {
    padding-bottom: .3em;
    margin-bottom: .3em;
}
.bottomQuote p,  .contentHeader p {
    font-weight: 100;
    line-height: 1.25;
    padding-bottom: 20px;
    display: inline-block;
    width: 100%;
}
.bottomQuote p {
    font-size: 1.4em;
}
/* /preFooter */

/* Footer */
.footTop > div {
    display: block;
    float: left;
    border-right: 1px solid #91B062;
    width: 24%;
    margin-right: 1%;
}
.footer.block {
    display: block;
}
.footTop > div:last-child  {
    border: none;
    margin-right: 0;
}
.footerBottom .innerBlock > div {
    display: inline-block;
    width: 48%;
}
.footer3 span, .footer4 p > *{
    display: block;
    float: left;
    width: 65%;
    margin-left: 20%;
    padding: .5em;
}
.footAdd:before, .footPhone:before {
    content: '';
    display: block;
    width: 17px;
    height: 20px;
    margin-right: .4em;
    background-image: url(../images/miniSprite.png);
    background-repeat: no-repeat;
    float: left;
}
.footAdd:before {
    background-position: 0 0;
}
.footPhone:before {
    background-position: -17px 0;
}
a.footFbLnk {
    background: #fff;
    color: #4C4C4C;
    border-radius: 4px;
    font-weight: 700;
}
.copyYear {
    float: right;
    text-align: right;
}
/* SOCIAL ICONS */
.social, .social > li {
    display: inline-block;
}
.social > li.skype {
    width: 100%;
    text-align: center;
}
.social > li > a {
    background: #fff;
    border-radius: 50%;
    color: #000;
    display: inline-block;
    font: 1.3em/2.3em 'icons';
    height: 2.3em;
    width: 2.3em;
    position: relative;
    text-align: center;
    transition: all 0.4s ease-out 0s;
    text-decoration: none;
    margin: .2em;
}
.social > li a:hover {
    background: #000;
    color: #fff;
}
.social i {
    font: 1em/2em 'icons';
}
/* footer */
.footer{
    background: #363636;
    color: #91B062;
    padding: 1em 0;
    font-size: 90%;
}
.footer .logo {
    width: 100%;
}
.footer h3 {
    color: #91B062;
    margin-bottom: .5em;
}
.footTop {
    padding: 1em 0;
}
.footer ul.menu li a {
    color: #91B062;
    font-size: .9em;
    margin-bottom: .2em;
}
.footer ul.menu li a:hover, .footer ul.menu li a:focus {
    background: transparent;
}
/** mailchimp form **/
#mc_embed_signup {
    background: #202020;
    display: inline-block;
    width: 90%;
    padding: 1.2em 5% 1.7em;
    text-align: left;
    border-radius: 3px;
}
#mc_embed_signup h2 {
    font-size: .8em;
    color: #ccc;
}
#mc_embed_signup label {
    display: none;
}
#mc_embed_signup input#mce-EMAIL {
    color: #ecebe9;
    float: left;
    margin: 0 18px 0 0;
    max-width: 100%;
    position: relative;
    width: 280px;
    color: #444;
    z-index: 10;
}
#mc_embed_signup input.button {
    vertical-align: top;
    display: inline-block;
    float: right;
    max-width: 20%;
    margin: 0;
}
.mc-field-group {
    position: relative;
    max-width: 50%;
}
.mce_inline_error {

}
/** /mailchimp form **/

/* /footer */

/* footer bottom  */
.footerBottom {
    padding: 1em 0;
    margin: .7em 0;
}
/* /footer bottom  */

/* Contact Form additions */
.contact {
    width: 70%;
    text-align: center;
    padding-bottom: 1em;
}
.contact h2 {
    border-bottom: 1px solid #E8E8E8;
    color: #676767;
    line-height: 0;
    margin: 1.5em 0 1em;
    font-size: 2em;
    font-weight: 300;
    letter-spacing: 0.5px;
}
.contact h2 span {
    background: #fff;
    padding: 0 1em;
}
.contact, .contactRight {
    display: inline-block;
    vertical-align: top;
}
.contactRight {
    width: 28%;
    margin: 9.55em 0 0 1.5%;
}
.contact h3 {
    font-size: 2em;
    padding: 1em 0;
    margin: .5em 0;
}
input:not([type='checkbox']),input:not([type='submit']), textarea {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-radius: 0;
    background-color: #efefef;
    border-color: -moz-use-text-color -moz-use-text-color #fff;
    border-image: none;
    border-style: none none solid;
    border-width: 0 0 1px;
    box-shadow: 1px 5px 9px rgba(0, 0, 0, 0.09) inset;
    color: #555;
    font-size: .8em;
    font-weight: 400;
    line-height: 1.2em;
    padding: .8em 1%;
    transition: all 0.2s linear 0s;
    width: 98%;
}
input:not([type='checkbox']):focus, input:not([type='submit']):focus, textarea:focus {
    box-shadow: 0!important;
}
/** contact form labels **/
.contact-form label {
    display: inline-block;
    width: 100%;
    text-align: left;
    padding-bottom: .3em;
}
.contact-form .form-horizontal .control-label {
    display: inline-block;
    width: 100%;
}
.contact-form .form-horizontal .controls {
    margin: 0;
}
.contact-form .form-horizontal .form-actions {
    padding: 0;
    border: none;
    text-align: left;
}
/** /contact form labels **/

/** contact block inside the sidebar **/
.sidebar > .contactSidebar h3 {
    text-align: center;
}
.sidebar > .contactSidebar {
    padding: 2em;
    box-sizing: border-box;
    border: 1px solid #e3e3e3;
    text-align: center;
}
/** /contact block inside the sidebar **/
/* /normal blog layout - using the parent class .logiBlog */

/* bootstrap overrides and additional exceptions */
.contactRight .dl-horizontal dt {
    width: auto;
}
.contactRight .dl-horizontal dd {
    margin-left: 2em;
}
dl.contact-address {
    padding: 0 0 1em 0;
    margin: .5em 0;
}
dl.contact-address span {
    display: inline-block;
    width: 100%;
}
dl.contact-address > dt, dl.contact-address > dd {
    display: inline-block;
    padding: .3em 0;
}
dl.contact-address > dd {
    width: 80%;
}
.item-page ol, .item-page ul {
    margin: 0 0 10px 25px;
    padding: 0;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.8;
}
#portfolioMini ul, .portfolioSide ul, ul.latestnews {
    margin: 0;
    list-style: none;
}
/* bootstrap overrides */

/* career page */
ul.careerDpts {
    display: block;
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 100%;
    min-height: 40em;
}
ul.careerDpts li {
    width: 20%;
    height: 100%;
    min-height: 4.5em;
    display: inline-block;
    padding: 1em 0;
    color: #fff;
    border-radius: 20px;
    background: #ccc;
    margin: 4%;
    position: absolute;
    height: 3em;
    text-align: center;
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.4em;
    transition: .2s all linear;
    cursor: pointer;
}
ul.careerDpts li span {
    display: inline-block;
    vertical-align: middle!important;
    width: 70%;
    height: 100%;
    margin-top: 6%;
}
ul.careerDpts li:nth-child(6) span, ul.careerDpts li:nth-child(2) span {
    width: 65%;
}
ul.careerDpts li:nth-child(4) span {
    width: 60%;
}
ul.careerDpts li:nth-child(1) span, ul.careerDpts li:nth-child(5) span,  ul.careerDpts li:nth-child(6) span {
    margin: 0;
}
ul.careerDpts li:hover, ul.careerDpts li:hover:after {
    background: #ccc!important;
    color: #6190be;
}
ul.careerDpts li:after {
    content: "";
    display: block;
    height: 9.25em;
    background: #6190be;
    width: .2em;
    border-radius: 5px;
    position: absolute;
}
ul.careerDpts li:nth-child(1):after {
    height: 5.2em;
    right: 49%;
    bottom: -6em;
}
ul.careerDpts li:nth-child(2):after {
    right: 138%;
    top: -109px;
    transform: rotate(-78deg);
}
ul.careerDpts li:nth-child(3):after {
    left: 138%;
    top: -109px;
    transform: rotate(78deg);
}
ul.careerDpts li:nth-child(4):after {
    left: 138%;
    bottom: -109px;
    transform: rotate(-78deg);
}
ul.careerDpts li:nth-child(5):after {
    right: 138%;
    bottom: -109px;
    transform: rotate(78deg);
}
ul.careerDpts li:nth-child(6):after {
    height: 0;
    width: 0;
}
ul.careerDpts li:nth-child(1) { 
    background: #E80719;
    top: 0;
    left: 36%; 
}
ul.careerDpts li:nth-child(2) { 
    background: #0156EF; 
    bottom: 0;
    right: 0; 
}
ul.careerDpts li:nth-child(3) { 
    background: #EF7700; 
    bottom: 0;
    left: 0; 
}
ul.careerDpts li:nth-child(4) { 
    background: #01AF00; 
    top: 15%;
    left: 0; 
}
ul.careerDpts li:nth-child(5) { 
    background: #7101D2; 
    top: 15%;
    right: 0; 
}
ul.careerDpts li:nth-child(6) { 
    top: 40%;
    left: 36%; 
    color: #6190be;


/* elements revealing effects */
.checkElm {
    transition: .5s all linear;
}
.hiddenElm {
    opacity: 0;
}
.hiddenElm.checkedElm {
    opacity: 1;
}
.revealElm {

    opacity: 1;
}
/* elements revealing effects */

/* VM Related */
.browseProductImage {
    max-width: 100%;
    max-height: inherit;
    height: auto;
}
.contentTop .category-view .row .category .spacer h2 a img {
    max-width: 125px;
    height: auto;
}
.innerRight .xselling h3 {
    margin: .3em 0;
}
.topten-view h4, .xselling h3 {
    color: #90AF5F;
}


.contentTop block .innerBlock ,.xselling .moduletable h3{
background-color:#8ec640;
color:#fff;
height:25px;
text-align:center;
vertical-align:top;
border-radius:10px;


}
.contentTop block .innerBlock ,.xselling .moduletable h3:before, .xselling .moduletable h3:after{
display:none;
text-align:center;


}

.contentTop block .innerBlock ,.xselling .moduletable .vmgroup{

padding-top:17px;
}


.topten-view {
    padding: 0 0 2em 0;
}
.contentTop div.product {
    border: none;
    position: relative;
}
.contentTop div.vm-details-button {
    display: none;
    position: absolute;
    top: 0;
    transition: .3s all linear;
}
.contentTop div.vm-details-button a.product-details {
    background: none;
    border: 2px solid #fff;
    color: #fff;
    margin-top: 57%;
}
.contentTop div.product:hover div.vm-details-button {
    display: block;
    background: rgba(145,176,98,.65);
    height: 70%;
    width: 100%;
}
.contentTop .vm3pr-0 .addtocart-area {
    min-height: inherit;
}
.contentTop .horizontal-separator {
    background: #959595;
}

/* vm hom categories layout */
.simple.category-view .category {
    max-width: 25%;
    margin: .3em 4%;
}
.category-view .category h2 {
    padding: .3em 6%;
}
.slider.category-view {
    float: left;
    width: 100%;
}
.slider.category-view .category {
    float: left;
    max-width: 25%;
    background: rgba(0,0,0,.65);
}
.slider.category-view .category {

}
.slider.category-view .category img {
    max-height: 120px;
}

.slider.category-view .category:first-child {
    margin-left: 25%;
}
.slider.category-view .category:nth-child(3){
    margin-right: 6%;
    padding: 0 20% 0 15%;
}
.slider.category-view .category:nth-child(6) {
    padding: 0 3%;
}
.slider.category-view .category:nth-child(7) {
    padding: 0 3% 0 6%;
    margin-right: 20%;
}
.slider.category-view .category:nth-child(8) {
    padding: 0 10% 0 10%;
    margin-left: 14%;
}
.slider.category-view .category:nth-child(10) {
    padding: 0 9% 0 21%;
}
.slider.category-view .category:nth-child(11) {
    padding: 0 4% 0 11%;
    margin-left: 37%;
}
.slider.category-view .category:last-child {
    padding: 0 17% 0 0;
}
.slider.vm-product-descr-container-0 h2 a {
    color: #000;
    font-size: 1.2em;
}
.slider.vm-product-descr-container-0 {
    text-align: center;
}
.breadCr {
    color: #ebebeb;
    padding: .4em 0;
    background: #EBEBEB;
    box-shadow: inset 0 0 10px #000;
    font-size: 1.3em;
}
.contentTop .breadcrumb {
    background: none;
    margin: 0;
    padding: 0;
color: #ebebeb;
}
.contentTop .breadcrumb li.active span {
    color: #90AF63;
}
.contentTop .breadcrumb > li {

}
/* /vm hom categories layout */

/* VM product details */
.contentTop .vm-product-container .vm-product-media-container {
    float: right;
    width: 40%;
}
.contentTop .vm-product-container .vm-product-details-container {
    float: left;
    width: 56%;
    margin-right: 4%;
}
.vm-product-details-container span.title {
    display: block;
    width: 100%;
    margin-bottom: .5em;
    font-size: 1.5em;
    color: #000;
}
.product-description {
    padding-bottom: 2em;
    min-height: 14.3em;
}
.product-description, .product-description span {
    color: #000;
    font-size: 1em;
    line-height: 1.5em;
}
.product-fields {
     margin-top: 1em;
         background-color:#e5f1d4;
         border-radius:12px;
         padding-left:10px;

}
.productdetails .product-fields .product-field {
    margin: 0;
    /*border-bottom: 1px solid #000;*/
}
.product-fields > div span.product-fields-title-wrapper {
    float: left;
    min-width: 45%;
}
.product-fields > div div.product-field-display {
    float: left;
    padding: 8px 0;
}
.product-fields > div:first-child {
    /*border-top: 1px solid #000;*/
}
.product-fields > div:last-child {
    border-bottom: none;
}
.product-fields > div:nth-child(odd) {
    background: #e5f1d4;
border-radius:12px;
}
/* VM product details */

.product h2 a {
    color: #000;
}
.product .vm-product-descr-container-0 {
    text-align: center;
}
.product  div.vm-details-button a {
    width: 94%;
    padding: 11px 3%;
}
.productdetails h1 {
    color: #90AF63;
    font-size: 1.45em;
    font-weight: 700;
    text-align: left;
    border-top: 2px solid #000;
    padding: .5em 0;
}
.innerRight {
    padding-top: 1em;
}
/* VM product details */

/* VM Cat sidebar */
.innerRight {
    width: 77%;
    display: inline-block;
    vertical-align: top;
}

Answer 1

@media screen and (min-width: 1081px) {
  .slider.category-view .category, .simple.category-view .category {
    width: 25%!important;
    max-width: 25%!important;
  }
}