0

So I've done the research and I understand the margin: 0 auto trick but I have been unsuccessful at implementing it.

If you navigate to http://CIRRUSFitness.com and find the second slider on the home page you will see what I mean. If there are less than 4 items the products are off to the side.

I believe the code I want to work with is below

.catalog .items { width: 1004px; margin: 0 auto; }
.catalog .item-block-1 { width: 210px; margin: 0 25px -25px 0; }

I have tried the following

.catalog .items { width: 100%; margin: 0 auto; }
.catalog .item-block-1 { width: 210px; margin: 0 auto; }

I may need to center the .items within the .catalog? The only catalog code is

.catalog { padding: 0 0 52px 0; }

It may be easier for someone to inspect the site and see what I am doing wrong using their developer tools but I am more than willing to provide any missing information.

Thanks for the help guys.. I know this is an easy fix but I'm doing something fundamentally wrong which hopefully someone can point out to me.

Tourtelot
  • 137
  • 3
  • 15
  • Essentially I want them to behave like http://stackoverflow.com/questions/17188455/how-to-center-multiple-divs-inside-a-container-in-css – Tourtelot Sep 08 '15 at 18:37
  • The easiest solution would be to remove the width:1004px from .catalog .items, and add display:flex; display:-webkit-flex; justify-content:center; -webkit-justify-content:center; to .catalog. – Kevin Hufnagl Sep 08 '15 at 18:59

2 Answers2

0

do you just want to center the text in the element? if that's so just add

.catalog .items { width: 100%; margin: 0 auto; text-align:center; }

if you want the element itself to be centered, the width should be less than 100%, try 

.catalog .items { width: 50%; margin: 0 auto; }
Jesse
  • 1,262
  • 1
  • 9
  • 19
  • I believe .catalog .items is already centered. I want the actual .items to be centered in .catalog if there isn't enough to fill the space which is shown in the second slide of that slider. – Tourtelot Sep 08 '15 at 18:29
0

I got this one for you

took me a while

just paste in this code

    .main-menu{float:left;
   width:100%;
   background:#fff;
   overflow:hidden;
   position:relative;}

.main-menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
.main-menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}

.main-menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   text-decoration:none;
   line-height:1.3em;
}
WEB PERSON
  • 50
  • 5
  • are you sure this was for me? – Tourtelot Sep 08 '15 at 20:03
  • damn it, im sorry dude, i tried to fix your slider and got distracted by your navigation, then totally forgot why i was on the page.... anyway, your navigation is not centered on the page, if you add the code i posted you will get a completely centered nav – WEB PERSON Sep 08 '15 at 20:23