Here is an example of what I mean: IMAGE

The photo at the top is full-width as are the little "bars" that stick out the sides of the content, but they all have to line up with the content they are paired with... in the case of the first blue bar (at the top edge of the main photo) the general concept is fairly simple, like a full-width div with a content-width div inside of it, but some of the other ones are kind of confusing, like the ones that outline the "previous" and "next" arrow buttons on the carousels.

Is there a "best practice" for making these kind of bars work and position properly?

Thanks in advance for any help or advice.