WordPress.org

Forums

Adelle
[resolved] Center the Container (8 posts)

  1. mrsfancee
    Member
    Posted 11 months ago #

    Hello, I've been changing some of the layout sizes (sidebar, header, footer etc.) in my custom CSS editor, so far everything has worked out great. But, I ran into one snag, the container is no longer centered with the page, even though the header remains centered.

    Below is the code I used to update my page:

    @media all and (min-width: 1095px) {
    	/* Overall */
    	.container {
    		margin: 10px auto;
    		width: 1095px;
    		overflow: hidden;
    	}
    
    	.header {
    		position: relative;
    		width: 1095px;
    		margin: 0 auto;
    		padding: 30px 0 0;
    	}
    
    	.section {
    		float: left;
    		width: 640px;
    		margin: 30px 0 30px 20px;
    	}
    
    	.aside {
    		float: right;
    		width: 375px;
    		margin: 30px 20px 30px 0;
    		background: #f8f8f8;
    	}
    
    	.footer {
    		clear: both;
    		overflow: hidden;
    		margin: 0 auto;
    		width: 1095px;
    		color: #777;
    	}
    
    	/* .nav */
    	.nav {
    		position: relative;
    		width: 1095px;
    		display: inline-block;
    		background: #000;
    		padding: 0 25px;
    		margin-top: 40px;
    		clear: both;
    		line-height: 1em;
    		text-transform: uppercase;
    	}
    }

    I would think that the: margin: 10px auto; would center the container element, but it isn't seeming to do so. Website: mrsfancee.com

    Any help is greatly appreciated :)

  2. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Looks centred to me, did you fix it?

  3. mrsfancee
    Member
    Posted 11 months ago #

    No, it's only very slightly off. If you were to compare the space on each side of the nav bar and look at it with respect to the header, you can see that it's not quite centered. Maybe it's not a big deal, I would just like the space on both sides to be equal.

  4. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Now I can see that the header is not centred, but the main body of the page is.

  5. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    I'm including the nav as well as the header image as the "header" not being centred

  6. mrsfancee
    Member
    Posted 11 months ago #

    You're right, the body is fine it's the nav bar and header that aren't centered. I'm not so concerned with the header and I will be changing that soon to align left. But do you have any tips on how to correct the nav bar so it is centered?

  7. Andrew
    Nuh uh moderator
    Posted 11 months ago #

    Just guessing but isn't it because of this width you're setting on the nav:

    width: 1095px;
  8. mrsfancee
    Member
    Posted 11 months ago #

    ah I feel so silly! bad math, thanks it's fixed :)

Reply

You must log in to post.

About this Theme

About this Topic