WordPress.org

Forums

Adelle
[resolved] Center the Container (8 posts)

  1. mrsfancee
    Member
    Posted 1 year 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 Nevins
    Forum moderator
    Posted 1 year ago #

    Looks centred to me, did you fix it?

  3. mrsfancee
    Member
    Posted 1 year 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 Nevins
    Forum moderator
    Posted 1 year ago #

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

  5. Andrew Nevins
    Forum moderator
    Posted 1 year ago #

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

  6. mrsfancee
    Member
    Posted 1 year 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 Nevins
    Forum moderator
    Posted 1 year ago #

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

    width: 1095px;
  8. mrsfancee
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic