Same code displayed differently

[OBXKH]

see

Document

now on my iphone safari WONKY

iphone Crome and firefox, no problem at all

hhhhmmmm head scratcher

my destop is flawless

please help


THANKS!

 

[VBService]

Try to write down this part of html like that ...

<article>

  <h2>Lorem ipsum ...?</h2>
  <div class="button"><a href="#">Button</a></div>

  <h2>Lorem ipsum ...?</h2>
  <div class="button"><a href="#">Button</a></div>

  <h2>Lorem ipsum ...?</h2>
  <div class="button"><a href="#">Button</a></div>

  <h2>Lorem ipsum ...?</h2>
  <div class="button"><a href="#">Button</a></div>

</article>

... and part of code of css as well

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: rgb(106, 112, 196);
    color: #fff;
    position: relative;
    z-index: 9999;
}
.button {
  border: 5px solid;
  margin: auto;
  width: 50%;
  background-color: #e70c68;
  text-align: center;
  width: 12rem;
  font-size: 18px;
  position: relative;
  bottom: 40px;
}
.button a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
}