Padding is moving div o/s fluid grid layout

After reading several posts, I am still no wiser to understanding why when I add padding to a text inside a div - it's moving the div outside the fluid grid layout.

I read one post that mentions I should add padding to the actual text using a new css rule, rather than adding the padding to the actual div itself - which I have tried to do, with no joy. The padding applied is still moving the div outside the fluid grid layout...

If anyone can point me in the right direction, I would very much appreciate it. Thank you.

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
.gridContainer {
  width: 89.0217%;
  max-width: 1232px;
  padding-left: 0.4891%;
  padding-right: 0.4891%;
  margin: auto;
}
#header {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
  background-color: #EDEDED;
}
}
.phone-no {
  font-family: "Roboto Bold";
  font-size: xx-large;
  text-align: right;
  padding-right: 20px;
}