* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
}
nav.menu{
display: flex;
margin: 60px 150px 0 150px;
width: 1140px;
column-gap: 156px;
}
.link {
display: flex;
column-gap: 42px;
}
.link a{
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 19px;
color: #4F5665;
}
a{
text-decoration: none;
}
.buttons{
display: flex;
column-gap: 11px;
box-sizing: border-box;
}
.logo{
display: flex;
}
.perlink a{
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #0B132A;
}
.button{
width:150px;
}
.button button{
width: 100%;
border: 1px solid #F53855;
box-sizing: border-box;
border-radius: 50px;
height:45px;
font-weight: 500;
font-size: 16px;
line-height: 19px;
color: #F53855;
background: #fff;
padding-bottom: 46px;
margin-bottom:46px ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PRACTISE</title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,500;1,600;1,700&display=swap"
rel="stylesheet">
</head>
<body>
<nav class="menu">
<div class="logo">
<div class="image"><img src="images/Logo.png" alt="logo"></div>
</div>
<div class="link">
<div class="text1"><a href="/">About</a></div>
<div class="text2"><a href="/">Features</a></div>
<div class="text3"><a href="/">Pricing</a></div>
<div class="text4"><a href="/">Testimonials</a></div>
<div class="text5"><a href="/">Help</a></div>
</div>
<div class="buttons">
<div class="perlink"><a href="/">Sign In</a></div>
<div class="button">
<button>Sign Up</button>
</div>
</div>
</nav>
</body>
</html>