I am currently learning HTML5 and attempting to create a specific sized section in the browser where various elements like buttons and text will be displayed based on user interaction. However, I am running into an issue with adjusting the size of the section to be smaller than the screen or positioning it a set distance below the header to create a border all around it showcasing the background image. Below is the snippet of HTML5 code I have so far:
<body>
<header>
<nav id="nav1">
<button id="b1"> Goals </button>
<button id="b2"> Habits </button>
<button id="b3"> Diary </button>
</nav>
</header>
<section id="goals">
</section>
And here is the CSS styling for the section:
section
{
height: 700px;
background-color:blue;
overflow:auto;
top:50px;
transform:translateY(20px);
}