как мне переместить Hulu lo go так, чтобы слово "Hulu" было больше в центре кнопки? Это действительно смущает меня. Я абсолютно не знаю, как это сделать, и я прошу прощения за то, что не очень хорошо описал это. Любая помощь будет принята с благодарностью, так как я полностью потерялся здесь и не знаю, что делать.
body {
padding: 50px;
display: flex;
}
.netflix {
transition: all .2s ease-in-out;
cursor: pointer;
height: 210px;
width: 400px;
border-style: none;
outline-style: none;
position:relative;
background-image: url(netflix\ black\ logo.png);
background-size: cover;
border-radius: 3px;
}
.netflix:hover {
transform:scale(1.03,1.03);
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.hulu {
transition: all .2s ease-in-out;
cursor: pointer;
height: 210px;
width: 400px;
background-image: url(https://productimages.nimbledeals.com/gift_card_skin/e8d26e937d5017929ab3338bbff8be9_1567801840833);
background-size: cover;
margin-bottom: 100px;
border-style: none;
outline-style: none;
margin-left: 15px;
border-radius: 3px;
}
.hulu:hover {
transform:scale(1.03,1.03);
box-shadow: 0 4px 8px 0 rgba(141, 105, 105, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*div {
width: 310px;
height: 169px;
background-image: url(netflix\ black\ logo.png);
background-size: cover;
position: absolute;
top: 4;
/*margin-right: 2px;*/
/*margin-left: 5px;*/
/*align-self: center;
}*/
/*p {
margin-top: 40px;
margin-left: 2px;
margin-right: 2px;
text-align: left;
margin-top: 176px;
color: black;
font-size: 22px;
font-family: Arial, Helvetica, sans-serif;
}*/
<html>
<head>
<title>entertainment</title>
<link rel="stylesheet" href="shop.css">
</head>
<body>
<form action="https://netflix.com/" target="_blank">
<button class="netflix">
<!--div>
</div>
<p>visit netflix and stuff </p-->
</button>
</form>
<form>
<button class="hulu">
</button>
</form>
</body>
</html>