WordPress.org

Support

Support » Themes and Templates » Adelle » [Resolved] Center the Container

[Resolved] Center the Container

  • 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 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Looks centred to me, did you fix it?

    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.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I’m including the nav as well as the header image as the “header” not being centred

    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?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    width: 1095px;

    ah I feel so silly! bad math, thanks it’s fixed 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] Center the Container’ is closed to new replies.
Skip to toolbar