ウェブサイトを作ったら、メニューの一番右だけがカラム落ちします。

ウェブサイトを作ったら、メニューの一番右だけがカラム落ちしてしまいます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>USOマーケティング株式会社</title>
6    <link rel="stylesheet" href="index.css">
7</head>
8<body>
9<header>
10<div class="logonavi clearfix">
11<div class="logo"><h1>USOマーケティング株式会社</h1></div>
12<div class="navi">
13<ul>
14 <li><a href="">TOPページ</a></li>
15 <li><a href="">WEBショップ支援</a></li>
16 <li><a href="">アクセスアップ</a></li>
17 <li><a href="">マーケティング分析</a></li>
18 <li><a href="">会社概要</a></li>
19 <li><a href="">資料請求</a></li>
20</ul>
21</div>
22</div>
23</header>   
24</body>
25</html>
26

css
1@charset "utf-8";
2* { 
3    margin:0;
4    padding:0;
5}
6
7header {
8    border-top: solid 5px #dd3355;   
9}
10
11.clearfix:after {
12    content:" ";
13    display:block;
14    clear:both;
15}
16
17.logonavi {
18    margin-top: 16px;
19    width: 1036px;
20    margin-left: auto;
21    margin-right: auto;
22}
23
24.logo h1 {
25    float: left;
26    width: 253.375px;
27    color: #dd3355;
28    font-size: 1.2em;
29    font-family: "Microsoft YaHei";
30    font-weight: bold;
31    margin-right: 50px;
32}
33
34.navi li {
35     float: left;
36     font-size: .8em;
37     line-height: 30px;
38     width: 116px;  
39     list-style-type: none;
40     border-left: solid 1px #4a4a4a;
41     padding-left: 2.5px;
42     padding-right: 2.5px;
43}
44
45.navi a {
46    display: block;
47    text-decoration: none;
48    text-align: center;
49    color: #8e8d90;
50}
51

FirefoxとChromeでカラム落ちします。(Edgeではカラム落ちせずに表示されます。)
必要な幅は何度も計算してみたのですが1036pxで合っていますよね？
カラム落ちを防ごうと思うと幅が1159px必要になります。
ロゴとメニューをぴったり中央に表示したいので、幅を1036px前後に設定したいのですが、
どうして幅が1159pxも必要になるのでしょうか？

m.ts10806

2017/08/28 04:05

Chrome、IE11で再現しませんでした。提示のソースで全てでしょうか？

ukairo

2017/08/28 04:06

はい、すべてです。

m.ts10806

2017/08/28 04:23

.navi liのwidthを1px増やしたら確かに落ちますが、ご提示の116pxでは落ちませんでした。必要な幅の件ですが、.log h1のwidthに小数も指定していることもあり、1036ぴったりにはならないはずですね。

ukairo

2017/08/28 05:05

解答ありがとうございます。こちらの環境になにか問題がありそうですね。

x_x

2017/08/28 09:04

"Microsoft YaHei"というのは中国語用のフォントらしいのですが、日本語の文書でありながらそのフォントを使う理由は何でしょうか？

ukairo

2017/08/29 00:41

回答ありがとうございます。中国語のフォントだと知りませんでした。なんとなく良いと思って使っていました。

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

回答4件

box-sizing:border-box;を追加してあげて、
borderとpadding分をliのwidthに追加してみてはいかがでしょうか。

ちなみに、1036pxではなく正しくは、1035.375pxかと思います。

CSSを更新しました。
おそらくfont-familyがいけないのかと思います。
こちらで試してみてください。
※ 必要に応じて、.logo h1のmargin-rightを調整ください。

css
1@charset "utf-8";
2* { 
3    margin:0;
4    padding:0;
5}
6
7header {
8    border-top: solid 5px #dd3355;   
9}
10
11.clearfix:after {
12    content:" ";
13    display:block;
14    clear:both;
15}
16
17.logonavi {
18    margin-top: 16px;
19    width: 1036px;
20    margin-left: auto;
21    margin-right: auto;
22}
23
24.logo h1 {
25    float: left;
26    color: #dd3355;
27    font-size: 1.2em;
28    font-weight: bold;
29    margin-right: 49px;
30}
31
32.navi li {
33     float: left;
34     font-size: .8em;
35     line-height: 30px;
36     width: 122px;  
37     list-style-type: none;
38     border-left: solid 1px #4a4a4a;
39     padding-left: 2.5px;
40     padding-right: 2.5px;
41     box-sizing:border-box;
42}
43
44.navi a {
45    display: block;
46    text-decoration: none;
47    text-align: center;
48    color: #8e8d90;
49}

投稿2017/08/28 04:38

編集2017/08/28 06:39

takumaro_web

総合スコア301

ukairo

2017/08/28 05:18

回答ありがとうございます。box-sizing:border-box;を追加して、widthを変えましたがカラム落ちは変わりませんでした。すみません；

takumaro_web

2017/08/28 06:10

1度、スクリーンショットを取って貼り付けて頂いてよろしいでしょうか。。

ukairo

2017/08/28 06:22

ありがとうございます。スクリーンショットを質問欄に貼りました。これでよろしいでしょうか？

takumaro_web

2017/08/28 06:40

修正してみたのでお試しください。

ukairo

2017/08/29 00:40

ありがとうございます。カラム落ちはしたままでしたが、別のパソコンを使ったらカラム落ちは起こりませんでした。どうやら自分の環境に問題があるようです。(ブラウザーは最新のを使っています。)

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

「takumaro_web」さんのご指摘通り、単純に「font-family」の選択により、h1のmargin-right: 50px;が押し出されるからだと思います。ここの値を調整するか、各フォントの種類とサイズを変更するかではないでしょうか？

投稿2017/08/28 07:42

yoshinavi

総合スコア3523

ukairo

2017/08/29 00:44

回答ありがとうございます。font-familyに問題があるとは気づきませんでした。 CSSを修正してもカラム落ちは治らないままでしたが、別のパソコンで試したら問題がなかったので、自分の環境になんらかの原因があるようです。

yoshinavi

2017/08/29 02:01

問題のある環境と、そうでない環境の違いを理解しておくと、今後の問題解決に役立つかと思います。また、「頭の中での計算」がズレを起こしても気付かない場合もありますので、各ブロックに色を着け、視覚的に確認すると解決する場合もあります。

ukairo

2017/08/29 02:09

回答ありがとうございます。環境の何が違うのか原因を探りたいです。

yoshinavi

2017/08/29 02:44

環境を考える場合、OS、ブラウザーのバージョン、ディスプレイサイズ（デバイスサイズ）等が、一般的に最初に見る所かと思います。今回の場合、リセットCSS等で基本のフォントサイズは揃えていますか？「ｈ1」のフォントサイズが「em」なので、各ブラウザーの基本設定で大きさが違う場合があり、結果、横幅が決まっているので、不足分は押されてカラム落ちします。違う環境でも統一させるリセットCSSを見直すのも、一つの方法だと思います。

ukairo

2017/08/30 02:41

回答ありがとうございます。リセットCSSは知りませんでした、調べてみます。

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

自己解決