JWolfPDX

“Try to keep the elements in the same position as they are in their natural source order” Do you mean to have my child css in the same order as it appears in the parent css? I am doing that.

“Don’t use crazy margins” Not sure what you mean by that. I had to use negative values in the margins to get the layout that I wanted. Is that not the right approach? If not, how else can I achieve the result I want?

“Keep your markup valid” I assume you mean the CSS? I am following the same format that I see in the parent CSS so I assume it’s valid.

Anything else I can try?

Ok, I have finally worked through this myself. I will post my solution here in case anyone runs into this.

What I had to was set my background image height and width to the exact dimensions of my background image, simply setting them to 100% was not working.

Here is the final css:

.header-widget {
background: black url(https://jwolf.noip.me:8088/wp-content/uploads/2015/11/EP-Comedy-Store-bg-large.jpg) no-repeat top left;
float: left;
margin-top: -18px;
margin-right:-50px;
margin-left:-36px;
margin-bottom: -18px;
width: 1190px;
height: 476px;
}

Ok so I’ve gotten this to work for the most part by adding the following CSS to my child theme:

.header-widget {
margin-top: -18px;
margin-right:-50px;
margin-left:-36px;
margin-bottom: -18px;
}

However I still have a border along the right side of the image regardless of the value that I set the margin-right to.

Any suggestions on how to remedy this issue?