レスポンシブでナビが右端に行ってしまうのを直したい。

現在、あるHPの採用ページをレスポンス化しているのですが、
何故かスマホで表示されるナビの画像が、右端に出てしまいうまくレスポンシブにならない。
TOPだけはレスポンス対応になっているので、それを真似てみたがうまく行かない。
ID develop PASS PassW0rd
http://p53.kunokin.develop.lionheart.co.jp/

http://p53.kunokin.develop.lionheart.co.jp/recruit/

cssで対応しているのだがうまく行かず

css
1
2/**
3 * スマートフォン用
4 */
5@media screen and (max-width: 479px) {
6    .wrapper {
7        width: auto;
8        min-width: 0;
9        overflow: visible;
10    }
11    .layout {
12        width: auto;
13        padding:0 10px;
14    }
15
16    body {
17        padding-top: 50px;
18    }
19    img {
20        width: 100%;
21        height: auto;
22    }
23    .h2-head img {
24        height: 18px;
25        width:auto;
26    }
27    #head {
28        height: 50px;
29        overflow: visible;
30    }
31        #head .head-h1 {
32            display: none;
33        }
34        #head .logo {
35            float: none;
36            padding-top: 6px;
37        }
38            #head .logo img {
39                width: 218px;
40                height: auto;
41            }
42        #head .tel,
43        #head .contact {
44            display: none;
45        }
46        #head .sp-navi {
47            display: block;
48            position: absolute;
49            right: 0;
50            top: 0;
51        }
52            #head .sp-navi img {
53                width: 50px;
54                height: 50px;
55            }
56
57    #navi {
58        display: none;
59        position: absolute;
60        width: 100%;
61        left: 0;
62        top: 0;
63        background: none;
64        height: auto !important;
65        z-index: 8;
66    }
67        #navi ul {
68            margin: 20px 20px 20px;
69        }
70        #navi li {
71            float: none;
72            margin-bottom: 8px;
73        }
74        #navi li.sp {
75            display: block;
76        }
77        #navi li a {
78            display: block;
79            height: 40px;
80            background: #fff;
81            color: #1a1a1a;
82            text-align: center;
83            line-height: 40px;
84            text-decoration: none;
85        }
86            #navi li a:before {
87                content: attr(title);
88            }
89        #navi li img {
90            display: none;
91        }
92        #navi .close {
93            display: block;
94            text-align: center;
95            margin: 20px 0;
96        }
97            #navi .close img {
98                width: 30px;
99                height: 30px;
100            }
101    #head .navi-wrap {
102        background: rgba(0,0,0,.7);
103        position: absolute;
104        left: 0;
105        top: 0;
106        width: 100%;
107        z-index: 5;
108    }
109    .navi-view #navi,
110    #head.navi-view .navi-wrap {
111        display: block;
112    }
113
114    .contact-box {
115        float: none;
116        width: auto;
117        height: auto;
118        padding: 8px 12px;
119    }
120        .contact-box h2 {
121            font-size: 14px;
122            margin-bottom: 10px;
123        }
124            .contact-box li.tel {
125                padding-bottom: 9px;
126                margin-bottom: 10px;
127                border-bottom: 1px solid #D9D9D9;
128                text-align: center;
129            }
130                .contact-box li.tel img {
131                    float: none;
132                    width: 80%;
133                    height: auto;
134                    display: block;
135                    margin: 0 auto 10px;
136                }
137                .contact-box li.tel span {
138                    float: none;
139                }
140            .contact-box li.fax {
141                margin-bottom: 12px;
142                text-align: center;
143            }
144                .contact-box li.fax img {
145                    width: 80%;
146                    height: auto;
147                    display: block;
148                    margin: 0 auto 5px;
149                }
150                .contact-box li.fax span {
151                    margin: 0 .5em;
152                }
153            .contact-box li.btn img {
154                width: 100%;
155                height: auto;
156            }
157    .recruit-ban {
158        float: none;
159        text-align: center;
160        margin-top: 15px;
161    }
162        .recruit-ban img {
163            max-width: 100%;
164            width: auto;
165            height: auto;
166        }
167
168    #foot-banner {
169        padding: 5px 0 0;
170        background: #231815;
171    }
172        #foot-banner ul {
173            width: auto;
174            padding-right: 5px;
175            text-align: center;
176            font-size: 0;
177        }
178            #foot-banner li {
179                font-size: 12px;
180                float: none;
181                display: inline-block;
182                margin-right: 0;
183                width: 50%;
184                padding-right: 5px;
185                margin-bottom: 5px;
186                -webkit-box-sizing: border-box;
187                -moz-box-sizing: border-box;
188                box-sizing: border-box;
189                background: none;
190            }
191                #foot-banner li img {
192                    max-width: 100%;
193                    width: auto;
194                    height: auto;
195                }
196    #foot {
197        padding-top: 15px;
198    }
199        #foot .info-block {
200            width: auto;
201            float: none;
202        }
203            #foot .info-block .desc {
204                font-size: 12px;
205                text-align: center;
206            }
207            #foot .info-block h2 {
208                text-align: center;
209            }
210            #foot .info-block h2 img {
211                width: 200px;
212                height: auto;
213            }
214        #foot .foot-sitemap-block {
215            display: none;
216        }
217        #foot .copyright {
218            text-align: center;
219            margin-top: 15px;
220            font-size: 10px;
221        }
222}
223

採用のTOPだけ表示がおかしくなる原因が分からず。
TOPからCSSを持ってきただけなので何か足りないコードがあれば教えて欲しいです。

行動規範の内容に同意します

回答2件

ベストアンサー

これが邪魔をしているようですね

html
1<div class="clearfix">
2                    <ul>
3                        <li>
4                            <p class="photo"><img src="./img/index/activity-ph01.jpg" alt="" width="300" height="170"></p>
5                            <h3>バドミントン</h3>
6                            <p>■活動場所：常滑市体育館</p>
7                            <p>■人数：約10名<br>
8                                仕事後に会社近くの体育館で活動しています。本格的にやりたい人はもちろんのこと、遊び感覚でやりたい人も大歓迎！平成26年度から、愛知県実業団に加盟して試合に出ています。</p>
9                            <p>■試合実績<br>
10                                
11                                ・平成27年度／常滑市民大会1部男子ﾀﾞﾌﾞﾙｽ<br>
12                                    　　　　　　　  準優勝
13                                ・平成28年度／実業団前期ﾘｰｸﾞ男子4部優勝<br>
14                                    　　　　　全日本実業団選手権出場<br>　　  
15                                </p>
16                        </li>
17                        <li>
18                            <p class="photo"><img src="./img/index/activity-ph02.jpg" alt="" width="300" height="170"></p>
19                            <h3>フットサル</h3>
20                            <p>■活動場所：主に東工場屋上<br>
21                                　　　　　　その他県内の体育館、フットサル場</p>
22                            <p>■人数：約10名<br>
23                                社内に施設があるので、昼休みに集って楽しく運動しています。土曜日になると午前4時30分から始めます！</p>
24                        </li>
25                        <li>
26                            <p class="photo"><img src="./img/index/activity-ph03.jpg" alt="" width="300" height="170"></p>
27                            <h3>ボーリング</h3>
28                            <p>■活動場所：名古屋グランドボール</p>
29                            <p>■人数：16名<br>
30                                土曜出勤日や、金曜日の夜に活動しています。ストライクを狙って日々のストレスを発散！？</p>
31                        </li>
32                        <li class="clear">
33                            <p class="photo"><img src="img/index/activity-ph04.jpg" alt="" width="300" height="170"></p>
34                            <h3>全日本製造業コマ大戦</h3>
35                            <p>■活動場所：久野金属工業常滑工場設計室</p>
36                            <p>■人数：約10名</p>
37                            <p class="indent">■内容：直径2cmのコマにデザインと技術を詰め込み、相手と同じ土俵で戦う。</p>
38                            <p class="indent">■実績：2015年2月世界大会ベスト8、2015年4月東京ビックサイト場所『優勝』など</p>
39                        </li>
40                        <li>
41                            <p class="photo"><img src="./img/index/activity-ph05.jpg" alt="" width="300" height="170"></p>
42                            <h3>ゴルフ</h3>
43                            <p>■人数：約10名<br>
44                                年に1?2回のコンペに向けて打ちっぱなし練習等を行っています。ゴルフ好きな方、チャレンジしてみたい方歓迎します。道具の貸し出しも行います。</p>
45                        </li>
46                        <li>
47                            <p class="photo"><img src="./img/index/activity-ph06.jpg" alt="" width="300" height="170"></p>
48                            <h3>釣り</h3>
49                            <p>釣り好きの社員が夜中に会社へ集合し船釣りなどに行っています。社員はもちろんのこと、元社員の顔もチラホラ。社員同士の仲の良さが伺えます。魚が釣れても釣れなくても心は満タンになることでしょう。</p>
50                        </li>
51                    </ul>
52                </div>