How do you space out content?

HTML & CSS
1

At the bottom of our webpage we have “About 97CentHosting”, “We Accept”, and “Support”. How do I space these out so there centered evenly on the webpage? The webpages is at: http://www.97centhosting.com

Thanks

2

I would offer a standard CSS solution, but because you are using Bootcrap, there’s no doubt and in-built class or something for dividing a section into thirds. Make sure to read the framework’s docs so that you know how to use it effectively.

In the section above, you’ve used class="span3" on the three columns. Why not here too?

3

Hi,

Hi,

You need to work with bootstrap and not against it :smile:

There’s no point in using a massive framework like bootstrap unless you adhere to its rules. Your spans on the footer should add up to 12 but yours only add up to 10. You have also modified the span classes and added padding which breaks the grid. Not to mention that you have also modified .container which again breaks the grid structure.

You should leave bootstraps structural grid classes alone in most cases and if you want custom widths then come out of the grid and use your own classes. If you need to add padding inside the grid then don’t modify the span classes but instead apply padding on an inner element instead.

Remember that bootstrap creates guttering on columns by using negative margins on .row and padding on the container so once you mess with these you break the grid approach completely You should re-read the bootstrap documentation as it explains these requirements.

Don’t be a slave to the grid though and come out of it when you want custom widths and different effects. To equally space four items across I would use display:table and display:table-cell instead of floating and the cells will automatically evenly space out.