Search code examples
htmlcssmargincenter

Don't allow margin of element being clicked to change page


Currently I have a header element within an anchor element, however I am using the rule margin: 0 auto to center the header, which is leaving a margin of 232px on each side, which if clicked will change the page. How can I center this header without leaving behind the margin which will change the page when clicked? Thanks and I can add any other screenshots if needed

Code:

                a(href=`${story.url}`)
                    h5.disabled.balance-text(style="width:466px;margin:0 auto;") #{story.title}
                    br
                    img(src=`${story.storyImageUrl}` style="width:400px;")
                    br
                    br
                    p.balance-text(style="width:440px;margin: 0 auto;color:black") #{story.description} (#{timeAgo.format(new Date(story.publishedAt))})

enter image description here

enter image description here


Solution

  • Wrap the element in a container and apply the margin and width to that while the contained item is still bound with the click handler