ISSUE: input boxes reposition themselves when selected

I have some input boxes on a page that move around when they are clicked.
Here is how it looks on the page:

Once I click into the boxes:
image

I would like the boxes to remain in their original positions. I am not very good at CSS and just copied my CSS file from another dash app I made. But for some reason it looks completely different and behaves differently. Any insight into why I am having this problem would be helpful.

HTML/dcc layout:

CSS class:
.inputBoxCred {
font-size: 14px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 5px;
}