.box-innerのwidth:calc();で.box-innerを囲っている#box-wrapのwidthを指定したい

ブレイクポイントで#containerのwidthが100%になったとき、
横並びになっている3つの.box-innerが可変で同じwidthになり、
余白は固定で25pxずつ空けるレイアウトを作りたいです。
現状では右側の余白が大きくなってしまっています。

私の考えでは、.box-innerのwidth: calc((100% - 100px) / 3 );のところで、
この100%の指定が.box-innerのwidthに対して計算されているのが原因と思われます。
ここの100%の指定を#box-wrapのwidthに対して計算されるようにしたいのですが、どうすればいいのでしょうか？
原因が全く別のところにあったらすいません。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>test</title>
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<link rel="stylesheet" href="css/style.css">
8</head>
9<body>
10
11<div id="container">
12
13<div id="box">
14	<h2>テキストテキスト</h2>
15	
16<div id="box-wrap">
17
18<div class="box-inner">
19	
20	<div class="box-innner-photo box-i-p-01">
21	</div><!-- /.box-innner-photo box-i-p-01-->
22	
23	<div class="box-innner-text">
24	<h4>テキストテキストテキスト</h4>
25	<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
26	</div><!-- /.box-innner-text -->
27</div><!-- /.box-inner -->
28
29<div class="box-inner">
30	
31	<div class="box-innner-photo box-i-p-02">
32	</div><!-- /.box-innner-photo box-i-p-02 -->
33	
34	<div class="box-innner-text">
35		<h4>テキストテキストテキスト</h4>
36		<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
37	</div><!-- /.box-innner-text -->
38	
39</div><!-- /.box-inner -->
40
41<div class="box-inner">
42	
43	<div class="box-innner-photo box-i-p-03">
44	</div><!-- /.box-innner-photo box-i-p-03 -->
45	
46	<div class="box-innner-text">
47		<h4>テキストテキストテキスト</h4>
48		<p>テキストテキストテキストテキストテキストテキスト</p>
49	</div><!-- /.box-innner-text -->
50	
51</div><!-- /.box-inner -->
52
53</div><!-- /#box-wrap -->
54
55</div><!-- /#box -->
56
57</div><!-- /#container -->
58
59</body>
60</html>

CSS
1@charset "UTF-8";
2
3/* reset */
4html,body, h1, h2, h3, h4, p, ul, li, dl, dt, dd, table{
5margin: 0;
6padding:0;
7line-height: 1.0;
8font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
9}
10
11a { text-decoration: none; }
12ul, li{ list-style: none; }
13img{ vertical-align: bottom; }
14
15/* #container */
16#container{
17width: 1000px;
18margin: 0 auto;
19padding-top: 60px;
20background-color: lavenderblush;
21}
22
23/* #box h2 */
24#box h2{
25height: 16px;
26padding-bottom: 30px;
27text-align: center;
28}
29
30/* #box h4 */
31#box h4{
32height: 40px;
33font-size: 14px;
34font-weight: bold;
35line-height: 40px;
36letter-spacing: 1px;
37color: #000;
38text-align: left;
39}
40
41/* .box-inner p */
42.box-inner p{
43height: 18px;
44font-size: 12px;
45font-weight: 500;
46line-height: 18px;
47letter-spacing: 1px;
48color: #000;
49text-align: left;
50word-break: break-all;
51}
52
53/* #box */
54
55#box-wrap {
56overflow: hidden;
57padding: 12.5px;
58box-sizing: border-box;
59}
60
61.box-inner{
62float: left;
63width: calc((1000px - 100px) / 3 );
64height: 300px;
65margin: 12.5px;
66}
67
68.box-innner-photo {
69height: 185px;
70}
71
72.box-i-p-01{
73background-color: lime;
74}
75
76.box-i-p-02{
77background-color: aqua;
78}
79
80.box-i-p-03{
81background-color: fuchsia;
82}
83
84.box-innner-text {
85height: 115px;
86}
87
88@media screen and (max-width:1020px){
89
90/* #container */
91#container{
92width: 100%;
93}
94
95/* #box */
96
97.box-inner{
98width: calc((100% - 100px ) / 3 );
99}
100
101.box-innner-text {
102height: 115px;
103}
104
105@media screen and (max-width:820px){
106
107/* #box h4 */
108#box h4{
109height: 40px;
110font-size: 14px;
111line-height: 20px;
112}
113
114}
115
116@media screen and (max-width:620px){
117
118/* #box h4 */
119#box h4{
120height: 36px;
121font-size: 12px;
122line-height: 16px;
123}
124
125/* .box-inner p */
126.box-inner p{
127height: 14px;
128font-size: 10px;
129line-height: 14px;
130}
131
132#box-wrap {
133padding: 5px;
134}
135
136.box-inner{
137width: calc((100% - 40px) / 3 );
138height: 285px;
139margin: 5px;
140}
141
142.box-innner-text {
143height: 100px;
144}
145
146}