Element Alignment with LinkedIn Hopscotch

Element Alignment with LinkedIn Hopscotch

I've just started using LinkedIn's Hopscotch to create a page tour for new
users. It seems pretty simple to use, except all the elements seem to be
out of alignment as shown in the image below. Any idea how to fix this
issue?

This is my js code:
var tour = {
id: "hopscotch",
showPrevButton: true,
steps: [{
title: "About Me",
content: "This is the header of my page.",
target: 'about_edit',
placement: "bottom",
xOffset: '-20'
},
{
title: "About Me",
content: "This is the header of my page.",
target: 'work_edit',
placement: "bottom"
}]
};
// Start the tour!
hopscotch.startTour(tour);