Trouble changing content width in WordPress

[littlevictorian]

I am brand new to WordPress and I'm trying to customize my Prose (Genesis) theme. Specifically, right now I'm having trouble with the widths of the content and sidebar. When I test out widths in inspect element, it looks perfect. So, I add the code to the Custom CSS box under the Genesis settings and it doesn't change. When I go back to inspect element, it doesn't show the dimensions I changed it to, it shows "Width: 100%" Does anyone know what I'm doing wrong? How do I change the widths if it's not by adding CSS?

[littlevictorian]

I'm also having trouble changing the positioning of widgets. I added one to the header-right area, but when I try to alter the margin to move it to the top of the screen, it just keeps bumping it back down. Oh, my mess of a site is here if that helps.

[newseed]

There are several elements (too many to name) that require changes if you are trying make something fit in an area that is too small width wise. The overall width of your framework is 775px. You have to calculate your content area, sidebar, header, widget(s), etc to make sure it all fits. Otherwise, it just blows up.

Edited June 14, 2013 by newseed

[littlevictorian]

Sorry, should have added more details. I am actually trying to make it smaller than it was originally. I resized the content area to 600px, and the sidebar to 130. I changed the header and footer area to 775 as well. The two widgets in the sidebar are set to 125px. Obviously there are other elements over-riding it and I just have no idea how to figure out what those are. Is it too soon to hate WordPress?

[newseed]

You still have one css rule that need adjust for the overall width of the page: #inner { clear: both; margin: 20px auto; width: 900px; /*this is what you have now...adjust to suit your new width*/} Take or zero out the right and top margins as shown below: span.socialwiggle { margin-right: 0; margin-top: 0;} Adjust the width for the header widget area to be... #header .widget-area { width: 280px;} If you want to move the social icons up then the top padding here: #header .widget-area { float: right; padding: 40px 0 0; width: 480px;} I do not know if any of these setting can be set in your theme's setting but you might check the themes folder to apply these changes.

Edited June 14, 2013 by newseed

[littlevictorian]

Thank you so much! I really appreciate it.

[littlevictorian]

I have another question. I'm fully aware that it's going to sound stupid, but if I don't figure this out, I'm going to be asking you guys for help every day. And I know you don't want that. In WP, how do you find out which elements are overriding the CSS changes you try to make? I'm used to using Inspect Element to find the selector, changing it in the style sheet and I'm done. But with this WP site, there seems to be something overriding almost every time I try to make a change...and I can't find the rule that's in the way. When I test the changes in Inspect Element, it looks perfect, but when I try to make them, nothing happens. For example, when I was struggling with the above issue, I never saw #inner in Inspect Element. (Yes, #inner is a pretty obvious one to miss, because I should have know it was there, but still, it didn't show up.) What am I missing here?