Why there is a distance between the elements?

Can't seem to find the cause of the curve display.
1. Why between items .logo and .there is the search space? After all, they are supposed to go one behind the other.
2. Why element .search retreats from the top of the page?

And how it to correct? In DevTools I can't even the cause of the conflict to find, and it should be easy (already 20 times the same thing like did and again the problem).

codepen.io/dhatt/pen/yaJqJP
July 4th 19 at 23:36
3 answers
July 4th 19 at 23:42
Solution
codepen.io/Geyan/pen/rrLAqA so like, if that is not write - will help
July 4th 19 at 23:38
Solution
Here you have used display: inline-block; accordingly, everything works like a built-in element.
  1. Space occurs as between inline elements by default includes spaces, you have to have nav to do font-size: 0; and blocks .logo and .search to set the required values for the font
  2. The built-in default items are aligned vertically at the baseline. It is necessary for .search and .logo to put vertical-align: top;
July 4th 19 at 23:40
Solution
Here it is:
codepen.io/Mois-ilya/pen/KgrBBo

inline-block determines the spacing between elements, it is better to use float for such purposes, and it aligns along the top edge

Find more questions by tags BootstrapCSS