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.

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;
}

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!!