I just recently began learning CSS about a week and a half ago, and I'm facing a challenge that I'm struggling to overcome. I want my webpage to have the same design as shown in this image, but despite trying various solutions, I can't seem to achieve the desired 50%-50% look.
<body>
<header class= "header">
<div class="box-1">
<h1>TOP STUDENTS</h1>
<b>Historic best averages</b>
</div>
</header>
/*CSS Styles*/
.header{
display: inline-block;
top:2vw;
left:2vh;
width:50vh;
right:2vh;
height:5vh;
margin:5% 25%;
position:relative;
}
.box-1{
min-width:400px;
min-height:60px;
padding-top:5px;
padding-bottom:5px;
text-align:center;
box-sizing:border-box;
border: 4px rgba(24, 26, 1, 0.705) solid;
font-size:24px;
display:inline-block;
background-color: rgba(200, 220, 150, 0.7);
box-shadow: inset 0 0 15px rgba(0,0,0,.5);
}
.box-1:hover{
width:400px;
height:110%;
font-size:30px;
background-color:rgba(226, 208, 40, 0.822);
transition: 2s;
}
I have noticed that when I switch between two monitors with different resolutions, the page layout gets distorted. However, my main focus is not on fixing this issue as it's not part of the exercise requirements. I have tried implementing some suggestions from previous posts, but nothing seems to be working. It appears that I might be missing something crucial. If you take a look at this image, you'll see how the header (highlighted in orange) should ideally look. Unfortunately, my current implementation falls short of this standard. Thank you for any assistance provided. IMPORTANT NOTE: I am specifically instructed not to use flexbox for this exercise.