Align header inside div issue

Hi. I hope someone here can help. I can't figure out how to align the header inside the div. I can't change the min height to adjust. What is wrong? I've also added an image of the issue.

HTML:

 
<div class="introbox-one header">
        <h1 class="header">HEY! THIS IS A HEADER</h1>
      </div>

CSS:

.introbox-one {
  width: 80%;
  height: 16px;
  border: 1px solid #9A00FF;
  padding: 10px;
  background-color: #9A00FF;
  animation: introbox-one 1s ease-in;
}
 
@keyframes introbox-one {
  0% {

Spacing Looks Good On Desktop But Too Much Spacing On Mobile

I'm using a height of 60px on a text section of my home page in order to keep my grid boxes the same height

This is on my site at Dealmazing

This is an image of the grid boxes here https://ibb.co/eSGLtn

you can I've circled the part i'm asking about.

It looks fine on desktop--but when you get to Mobile it has too much spacing.

Example of that here: https://ibb.co/j5c4KS

I notice that on mobile if i remove the height it looks perfect, but then if you look at it on desktop, all of the grids are misaligned.

Button positioning with image floated on right

Thnk I blew my previous post as I cannot find it, sorry new to this site. I have been trying to position a css button in the center of the text to the left of an image floated on the right. Of course css see the floated item and pushes the button down the page. I am still pretty new to css and as a result I have broke some other things trying to get this working but 1st things 1st. Here is an example of what is happening:
http://www.stokesabode.com/amsoil/gear-lube/75W-80W-90-marine-gear-lube.htm

The css code i am using is:
-------------------------------------------

Multiple Text Boxes in same line for Arabic

Hello every one, i am a beginner in css and i would like your help in the following:
i have three labels and text boxes in the same line in an English page

e.g label1 textbox1 label2 textbox2 label3 textbox3, i want them to look like the following when the page turns into arabic when the page

e.g textbox3 label3 textbox2 label2 textbox1 label1

Text overlayed & centered inside of resized image

I am new to CSS, so maybe someone can help me here. I'm trying to do kind of a lot at once. Basically, I have an image (a button, to be exact) that has been resized (if this is extremely difficult, this step isn't really necessary) and I would like to have text overlayed in it that is vertically and horizontally centered. I also would like to have a hover pseudo-class on the image, but I think I can handle this part myself. I have some ugly looking code right now, but I'll post it anyway just in case it is helpful in any way.

Syndicate content