Witam, od kilku dni uczę się html'a i przy okazji css'a dlatego postanowiłem stworzyć coś własnego i napotkałem problem z którym nie potrafię sobie poradzić, więc zwracam się o pomoc. Chcę uzyskać padding-top pomiędzy containerem a rectangle taki sam jak po lewej i prawie stronie czyli 50px, chodzi mi o stworzenie pewnego rodzaju ramki, może jest jakiś prostszy sensowniejszy sposób, proszę o pomoc.
<body>
<div id="container">
<div id="rectangle"></div>
</div>
</body>
</html>
body
{
width: auto;
height: auto;
background-image: url(img/background.JPEG);
background-size: auto;
background-position: center;
background-repeat: no-repeat;
margin-left: auto;
}
#container
{
width: 1000px;
height: 1000px;
background-color: rgba(218, 189, 189, 0.3);
margin-left: auto;
margin-right: auto;
margin-top: 40px;
margin-bottom: 40px;
}
#rectangle
{
width: 800px;
height: 400px;
background-color: rgba(218, 189, 189, 0.5);
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
padding: 50px;
}