General rule - don't touch the bootstrap files. Microsoft can replace them, and you will lose your changes, similarly if you rename it or move it Microsoft may re-add it and then what gets rendered will depend on the order the files load.
Instead, create your own file or use the Theme and add in the change and mark each of the items with the !important declaration to overwrite the ones in bootstrap instead.
From past experience I can confirm if your logo image is too large you will get this type of issue (and slight variations at differing screen widths). Even with your change double check on a mobile size screen as you may find the hamburger moves to the left and your spacing may not be enough etc when that occurs (and you may need to add different settings in media tags for the different screen sizes).
