My newsletter subscription box features a form that spans the entire width of its parent element, causing the button to fill up all available space.
To add a visual touch, I used the before
CSS pseudo-element to create a small 'arrow' shape above the Subscribe button.
The issue arises when the viewport width is decreased, as the arrow fails to align properly with the center of the button. This misalignment can be observed here:
What steps can I take to rectify this alignment problem?
JSFiddle: http://jsfiddle.net/ahmadka/7965p/
CodePen (JSFiddle is down sometimes): http://codepen.io/anon/pen/qFvbc