I'm new to CSS, started a week and a half ago, and I'm having an issue that I have a hard time solving a problem. I need my webpage to look
Like this, I have tried lots of stuff but I can't come up with a solution yet. It doesn't look right, it doesn't look 50%-50%
<body>
<header class= "header">
<div class="box-1">
<h1>TOP STUDENTS</h1>
<b>Historic best averages</b>
</div>
</header>
/*Now to CSS*/
.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 two monitors with different resolutions and when I swap the page it destroys itself but the objective is not correcting that since that's not what the exercises ask for.
I already tried a few suggested solutions here but nothing seems to work out. I'm doing something very wrong apparently
enter image description here
The page was doing fine until I started working to correct it and make the header look like it should (orange is the header), it isn't right though.
Thanks
VERY important clarification: I can not use flexbox because the exercise explicitly tells me not to.
question from:
https://stackoverflow.com/questions/65894253/how-to-make-a-headers-size-be-equal-in-both-margins 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…