imgの大きさが違って見える

サイト作成の勉強中です。

imgの見え方がページによって違うので困ってます。

html
1<img src="../../img/home.png" onclick="location.href='../index.php'" width="32" height="32">

という具合に縦横32pxにしています。
これが、AというページとBというページでサイズが違って見えます。
ぱっと見でAを1とするとBは1/4に見えます。

imgはheaderに入れて使ってます。

AのCSS
1body {
2    font-family: Arial, sans-serif;
3    margin: 0;
4}
5header {
6    height: 48px;
7}
8img {
9    margin: 0;
10    padding: 8px;
11    cursor: pointer;
12}
13main {
14    width: 350px;
15    margin: 0 auto;
16}
17h1 {
18    font-size: 24px;
19    margin: 0;
20}
21ul {
22    margin: 0;
23    padding: 0;
24    margin: 0px 0px 8px;
25}
26li {
27    font-size: 16px;
28    list-style: none;
29}
30
31.bundle {
32    width: 100px;
33    font-size: 16px;
34    text-align: right;
35    margin-left: 24px;
36    margin-right: 8px;
37}
38button {
39    height: 32px;
40    width: 100px;
41    background-color: skyblue;
42    color: black;
43    border: none;
44    border-radius: 8px;
45    cursor: pointer;
46    font-size: 16PX;
47    margin: 4px;
48}
49

BのCSS
1body {
2  font-family: Arial, sans-serif;
3  margin: 0;
4}
5header {
6  height: 48px;
7}
8img {
9  margin: 0;
10  padding: 8px;
11  cursor: pointer;
12}
13main {
14  width: 350px;
15  margin: 0 auto;
16}
17#video {
18  width: 100%;
19  height: auto;
20}

ちなみに、Bのページのvideoはスマホで見たら（350pxなので）画面いっぱいくらいに見えるハズですが、1/2に見えます。

追記１）
スクショを削除しました。
追記２）

<?php

ini_set('display_errors', 1 );
error_reporting(E_ALL);

require_once(__DIR__ . "/../../app/config.php");

use MyApp\Database;
use MyApp\Bundle;
use MyApp\Utils;

$pdo = Database::getInstance();

$bundle = new Bundle($pdo);
$bundle->processPost();
$b = $bundle->get();

?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tools</title>
    <meta http-equiv="Content-Style-Type" content="text/css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
    <img src="../../img/home.png" onclick="location.href='../index.php'" width="32" height="32">
</header>
<main>
  <h1>2F 食堂</h1>
  <ul>
      <li><label for="f2a4">A4</label><input id="f2a4" class="bundle" type="number" name="f2a4" onFocus="this.select();" value=<?= Utils::h($b->f2a4); ?>></li>
      <li><label for="f2a3">A3</label><input id="f2a3" class="bundle" type="number" name="f2a3" onFocus="this.select();" value=<?= Utils::h($b->f2a3); ?>></li>
      <li><label for="f2b5">B5</label><input id="f2b5" class="bundle" type="number" name="f2b5" onFocus="this.select();" value=<?= Utils::h($b->f2b5); ?>></li>
      <li><label for="f2b4">B4</label><input id="f2b4" class="bundle" type="number" name="f2b4" onFocus="this.select();" value=<?= Utils::h($b->f2b4); ?>></li>
  </ul>
  <h1>3F 会議室</h1>
  <ul>
      <li><label for="f3a4">A4</label><input id="f3a4" class="bundle" type="number" name="f3a4" onFocus="this.select();" value=<?= Utils::h($b->f3a4); ?>></li>
      <li><label for="f3a3">A3</label><input id="f3a3" class="bundle" type="number" name="f3a3" onFocus="this.select();" value=<?= Utils::h($b->f3a3); ?>></li>
      <li><label for="f3b5">B5</label><input id="f3b5" class="bundle" type="number" name="f3b5" onFocus="this.select();" value=<?= Utils::h($b->f3b5); ?>></li>
      <li><label for="f3b4">B4</label><input id="f3b4" class="bundle" type="number" name="f3b4" onFocus="this.select();" value=<?= Utils::h($b->f3b4); ?>></li>
  </ul>
  <button id="save">Save</button>
  <button id="done">Done</button>
  <input type="hidden" id="token" name="token" value="<?= Utils::h($_SESSION['token']); ?>">
</main>
</body>
<script src="js/main.js"></script>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Camera Test</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
    <img src="../../img/home.png" onclick="location.href='../index.php'" width="32" height="32">
</header>
<main>
  <video id="video" muted="muted" autoplay playsinline></video>
</main>
<footer>
  <span>aaaa</span>
</footer>
</body>
<script src="https://unpkg.com/tesseract.js@4.0.1/dist/tesseract.min.js"></script>
<script src="js/main.js"></script>
</html>

追記３）
マスクしたスクショアップします。
ページA

ページB