Why do some of my tabs cause my content to shift slightly to the right?

Question

I have created a very rough mockup for a registration site I'm building that uses bootstrap tabs. However, when I select a few of my tabs, I notice all of the content gets shifted to the right by a few pixels.

See here for my code, as it's too long to paste here. I don't think my JavaScript files would affect the appearance of the page when switching tabs, but if so, I'll attach them here if needed.

Notice how the page's content gets shifted to the right by a few pixels when switching from one of the following tabs: Personal Info, State/Federal, Ethnicity, Birthplace/Language, Medical, or School Release tab to either the Contact/Siblings, Placement, or Emergency Contact tab.

Answer 1

I believe it's because of the content height, on some tabs the vertical scrollbar shows up and pushes the content causing the shift. You can make the scrollbar show all the time by adding overflow-y: scroll; to the body element.

body {
    overflow-y: scroll;
}