Centering Content with Vertical Navbar

[thugsauce]

Hello all!

This is my first post in this community. Stack Overflow didn't seem so helpful -- and a lot of people there have snarky attitudes. After using W3 so much for help -- I wondered if they had forums. Here I am.

Problem

1. I am using a navbar on the left side of the screen to give this website a "platform" feel to it. 

2. I've set a margin so my content doesn't get hidden under the bar.   margin-left: 200px

3. The page displays fine on smaller screens and lower resolutions. The left navbar will automatically hide and I've made a media query to remove the margin-left: 200px for the main content

4. I'm using the w3.css "framework"

On larger screens, however, the page's content is pushed left. I wanted it centered. If I used margin: 0 auto; then the content would be pushed back under the navigation -- which isn't what I want.

I wasn't able to attach an image of my problem normally -- so I've included a link here: Page Image

 

Thanks for your time!!

 

[dsonesuk]

Then use a inner container containing the content you want centred with margin: 0 auto;

[thugsauce]

Thanks for the reply! As soon as I read that, it seemed like a logical solution to me. However, after nesting a div below the main one -- the content didn't center -- and but the images inside the cards shifted slightly. Maybe I'm doing something wrong.

HTML

<div class="w3-row-padding game_card">
     <div class="center_content">

                *** CONTENT ***

     </div>
</div>

CSS

.game_card {
  margin-left: 200px;
  margin-top: 30px;
}

.center_content {
  margin: 0 auto;
}

 

[dsonesuk]

We maybe getting confused here, to centre 'center_content' NON-FLOATED block element container, it must have a width, for example width: 80%; without this it fills the whole available to it, and the content will always be the left of that.

To centre content of images which are inline elements, or block elements styled to be inline or inline-block elements which essentially makes them act as text within a block paragraph element, you would style the block container 'center_content' with text-align: center;

[thugsauce]

Thanks! That did the trick!

Unfortunately, it also caused all of the elements wrapped inside to shrink. 

I think I'll have to study up more on CSS and responsive design.