Black Menu Line – Make wider

To center the header, find this code in your style.css:

#branding img {

	border-bottom: 1px solid #000;
	clear: both;
	display: block;
}

and replace it with this code:

#branding img {

	border-bottom: none;
	clear: both;
	display: block;
	margin: 0 auto;
}

To run the black line across the entire white space, there are two parts of your CSS you need to modify.

FIRST find this code in your style.css file:

#wrapper {
	background: #fff;
	margin-top: 20px;
	padding: 0 20px;
}

and replace it with this code:

#wrapper {
	background: #fff;
	margin-top: 20px;
	padding: 0;
}

SECOND

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}

and replace it with this code:

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 1020px;
}

@bethsoderberg Thank you for a detailed response, although you shouldn’t edit the theme’s files because:
– Your modifications will erase them the theme updates.
– Debugging becomes harder as you can’t distinguish between modified and original styles.
– You can compromise the theme.
– You’re more likely to have problems with CSS specificity.

To circumvent this, we recommend using a either a Custom CSS Manager plugin that contains your CSS in a separate section of the dashboard, or for more complex changes (including CSS) use a Child Theme.