Bug CSS Chrome, IE and Firefox

Question

I’m not able to understand a bug between browsers.

See this image of how it looks in Chrome and IE and how it looks in Firefox !(https://ibb.co/mv5DRS)

// CSS (Less)
 div{
    p{
        position: relative;
        text-transform: uppercase;
        padding: 0 0 10px;
        left: 10%;
        top: 18vw;
        width: 90%;

        span{
            padding: 0.2% 4%;
            color: #000;
            background-color: #193944;
            font-size: 320%;
            word-wrap: break-word;
            }
    }

}

I made it here to demonstrate and it worked perfect. But in my CSS gives the image error. I imagine it is something related to CSS Reset.

div{
  height: 400px;
  background-color: #2222;
  position: relative;
  }
  div p{
        position: relative;
		text-transform: uppercase;
		padding: 0 0 10px;
		left: 10%;
		top: 18vw;
		width: 90%;
  }
  div p span{
     padding: 0.2% 4%;
     color: #fff;
	 background-color: #193944;
	 font-size: 220%;
	 word-wrap: break-word;
  }

<div>
  <p><span>Texto</span></p>
  <p><span>Mais Texto Aqui</span></p>
  <p><a href="#">Link</a></p>
</div>