ARTICLE AD BOX
I have a website design in Figma, I need to transfer it to HTML and CSS, and I've encountered the following difficulty:
In order to transfer the main content of the site header, I need to set a fixed width for the header wrapper class. Here's an example.
<header> <div class="header--left"> <img src="svg/logo.svg" alt="Logo"> <nav> <a href="#"> <div class="nav--authors__active"> <p class="nav--authors__text">Authors</p> </div> </a> <a href="#" class="collections__a">Collections</a> <a href="#" class="services__a">Services</a> </nav> </div> <a href="#" class="wallet"> <div> <p class="wallet__text">Wallet</p> </div> </a> </header>So, I need to limit the width of the container with the header--left class to later center it horizontally. I could do this, but if I do, I'll lose the responsiveness of the header, and on screens with a width smaller than the one I specify for the .header--left container, a horizontal scrollbar will appear. I want to solve this problem using the CSS clamp() function, but I doubt it will work because the second parameter must be specified in vw. But if I calculate, for example, how many vw I need for my screen width and set this value as a parameter in clamp, then on a smaller screen the proportions won't be maintained, and a deviation will ultimately occur.
Here is an example of what it should look like:
