Text jumps to the next line in the container. How to avoid it?

HTML-CSS
1

So I´m making this footer: https://codepen.io/Assblack/pen/GRKrVvm

In the #check-btn-container I want the phrase “PULSA INTRO PARA” to appear in one line. But css makes the letter “PARA” jump into the next line.

I know this is because I put margin left in the button “Comprobar” so basically the line doesn´t have enough space anymore. The problem is since I´m using flexbox if instead of putting margin-left I increase the width of the container, button also gets wider. So that doesn´t work for me.

I have tried in increasing the width of the container with padding, but that doesn´t make the line appear in one line. Nothing changes.

Important: I need some margin or space between the phrase and the button.

2

hi i’m still learning html and css but from what I can see, the percentage value of margin-left on the button is causing this. If you try a px value it works. As to why i’m not too sure, maybe has something to do with the width of its container.