Not Full Width Of Container?


Not sure why these 3 boxes aren’t evenly placed in their container as I have a class for each of them at 33.3%. Another page on the website is fine doing this but not this one. Any ideas?


It would be helpful if you could add a screenshot of the problem you are experiencing. This will make it easier for others to understand exactly what you are referring to and provide accurate feedback.

Why don’t you try using flexbox? it is much simpler to do with flexbox. Try to give it a class, I would give class info-container as an example. Use these properties on the container of the 3 boxes:

.info-container {
display: flex;
justify-content: space-evenly;

Then remove the width and float properties on the box class.

I have done it with Chrome DevTools. This is GIF is a bit fast so you can pause and understand it.

I’m talking about the 3 boxes at the bottom of the page. I want them to span across the whole viewport.

I may have to do that but for now I’m purposely practicing without using flexbox. Appreciate the help though :+1:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.