Mathematics of fluid layout

I'm trying to develop a fluid layout, so the result of the percentages never hit the desired width, I have the following structure

HTML

<div id="wrapper">
   <div id="top"></div>
   <div id="filtragem"></div>

   <div id="container">
      <div class="box"></div>

      <div class="box" style="width:670px;">

      </div>

      <div class="right">

      </div><!--right-->
   </div><!--container-->

  <div id="footer"></div>
</div><!--wrapper-->

CSS

div{max-width: 900px;width: 100%;}

#wrapper{
  margin: 0 auto;
  width: 95%;
  background-color: #fff;
  box-shadow: 0 0 15px #ccc;
}
#top{
  height: 55px;
  background-color: gray
}
#filtragem{
  height: 30px;
  background-color: #ccc
}
#container{
  float: left;
  padding: 2% 2%;
  background-color: #fff
}
.box{
  float: left;
  margin: 2% 0% 0% 0%;
  height: 250px;
  background-color: green
}
.box:first-child{margin: 0%;}

.right{
  float: right;
  margin: 2% 0% 0% 0%;
  width: 176px;
  height: 250px;
  background-color: blue
}

#footer{
  float: left;
  height: 120px;
  background-color: #ebebeb
}

I read an article on the internet about fluid layouts and the account is as follows objeto/contexto so I made the following 670/900 (670 and the width of my second box) gave the following result 0,7444444444444444 ai did what article he said. count two houses on the left and add a dot, it was 74.44444444444444% so it did not stay the same when the width was fixed with 670px , with the width in percentage was smaller, I wanted to know if I'm missing something, I think so , because you are not closing the percentage with the fixed value in px

Does the padding of the 2% div container influence? if so how do I do this?