I want to make block links located horizontally. But when approaching the text of the links goes beyond the block. The blocks have a height restriction so that when approaching it looks nice.
header { position: absolute; background-color: rgba(209, 208, 206, 0.6); height: 22vh; z-index: 5; width: 100%; } nav#menu { height: 3rem; position: relative; top: 14vh; max-height: 7vh; } nav#menu ul.left { top: 0; left: 0; margin-left: 5vh; list-style-type: none; height: 100%; position: relative; float: left; } nav#menu ul.left li { height: 100%; float: left; position: relative; } nav#menu ul li a { height: 100%; display: block; text-decoration: none; position: relative; top: 0; left: 0; font-size: 1.3rem; } <header> <div class="wrapper"> <nav id="menu"> <ul class="left"> <li><a href="/">Главная</a></li> <li><a href="/about">О нас</a></li> </ul> </nav> </div> </header> How to make the text in the links did not go beyond the boundaries of the block and did not look huge when approaching? Is it possible to somehow limit the approximation of the site with a mouse on a computer (in google chrome an approximation of up to 500% is possible)?
