I have used bootstrap to build a header for a website. I have made sure that all the items would fit on the header using appropriate margins and paddings while developing it so that no text would go to a new line. I have published the website and on some computers, the header does not look the way I have intended.
The problem only occurs at max-width (higher than the max-size of bootstrap's container) so ignore smaller widths.
Note: I am using a container for the header, which means that it is not taking the whole width of the webpage.
Picture: https://i.imgur.com/CipNCAL.png First two are from different browsers on my laptop (the way I have intended) and the next two are from browsers on another computer (some text is on two lines which is not intended).
I have tried solving the problem that by fixing the properties of the font (explicit stating the size and font-family) but that has not changed anything.
Any ideas of how I could fix that so all the text on the header would always appear on one line like the first 2 examples of the picture?
The website: https://taxiburgas.com
Codepen (copy-paste the header part plus the whole CSS of the website): https://codepen.io/fsdfsdfsdf/pen/LYErmNr
.