I'm looking to rearrange the positioning of my green button on the screen. When I initially created the button, it ended up below my red button, but I want them to be displayed side by side. I haven't attempted any solutions because I am a beginner programmer and couldn't come up with any ideas. Apologies for my limited English proficiency. Any help would be greatly appreciated.
body {
padding: 50px;
}
.netflix {
color: white;
transition: transform 0.5s;
cursor: pointer;
height: 210px;
width: 400px;
border-style: none;
outline-style: none;
position:relative;
background: red;
/*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: transform 0.5s;
cursor: pointer;
height: 210px;
width: 400px;
background-image: url(hulu.jpg);
background-size: cover;
border-style: none;
outline-style: none;
background: lightgreen;
}
.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);
}
<html>
<head>
<title>entertainment</title>
<link rel="stylesheet" href="shop.css">
</head>
<body>
<form action="https://netflix.com/" target="_blank">
<button class="netflix">
<p>visit netflix and stuff </p>
</button>
</form>
<form>
<button class="hulu">
</button>
</form>
</body>
</html>