Shifting column

HTML & CSS
1

Hello,

this is my first post to sitepoint and I’m hoping it makes sense.

I just completed and posted my new website and seem to have everything working. I am running into one issue with smaller monitors/browser windows.

My header is fixed so that the content will scroll under it when viewed, but the scrolling content section adds a horizontal scroll bar to the bottom of the window on small screens which then allows the content area to shift right or left out of alignment and I cannot seem to find the fix for this.

The site is mieche.net and hopefully the attatched screen shots will help illustrate what I am talking about.

Am I just crazy in thinking I can keep this whole thing in alignment?

mieche

2

Hi mieche, welcome to SitePoint! :slight_smile:

It’s better to center your container like so:

#container {
	margin:0 auto;
	width: 750px;
	position: relative;
}

(I left position:relative in there in case it’s of relevance to the contents of the container, but it’s not needed to position the container itself.)

3

Thanks Ralph,

I’m not using the auto margins because I want to keep everything in line with my header which is fixed and won’t recenter with the page.