I need help with styling a group of 50% width elements that are displayed next to each other. I want to add a 20px white border around each element to create a separation between them. This is necessary because I have a responsive layout and always require a consistent 40px white space between the elements.
However, I am facing an issue with the hover effect on these elements. Adding a border to the main element causes the hover effect to trigger when hovering over the border or outline, which is not the desired behavior.
If you would like to see an example and test the hover effect for yourself, please visit this link: http://jsfiddle.net/keleturner/6PqJt/. Try hovering on the red border and outline (to trigger hover on the outline, you need to hover in between the two blocks).
The only workaround I have found so far is to wrap all the elements inside a new element with the class .main and apply the border there. However, I feel that adding extra markup solely for styling purposes is not very semantic and goes against best practices.