Aligning three elements (left/center/right) inside a container

Question

I am attempting to create a full-width banner with three internal inline elements. A back link, a logo and a forward link.

I would also like to use the same cod

Answer 1

Widely supported - my immediate answer is to use display: table;

Let me 'fiddle' around with this for a moment and get back to you - I was just working on something similar yesterday.

EDIT 1: At first glance, I would advise utilizing classes versus ID's. This deals with a much broader topic (CSS Specificity) but is extremely useful to think about early in your career. That being said, I am working on a solution for you, as I THINK I know what you want.

As the commenter mentioned - it would help ALOT to see what you want to see as an end result. From my interpretation of your screenshots (poor quality & non-descriptive FYI), I feel like you want this header to maintain the left/back button and the logo on mobile devices. However, on a desktop/laptop viewport size, you want a forward button to show itself.

If this is incorrect, please verify!

EDIT 2:

Going off the above poster's JSFiddle, I've come up with a "better" solution that stacks the elements within the header as opposed to going outside of the 'container' that it exists in: https://jsfiddle.net/f815aa6y/1/

Still working on the right solution to get this to vertically align in the middle :)