transform translateを使うと文字だけが移動してしまってpaddingやmarginなどを変更しても反映されない。

html
1コード<!DOCTYPE html>
2<html lang="en">
3    <head>
4        <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
5        <link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
6        <link rel="stylesheet" type="text/css" href="resources/css/style.css">
7        <link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
8        <title>Omnifood</title>
9    </head>
10    <body>
11        <header>
12            <div class="hero-text-box">
13                <h1>Goodbye junk food.<br> Hello super healthy meals.</h1>
14                <a class="btn" href="#">I’m hungry</a>
15                <a href="#">Show me more</a>
16            </div>
17        </header>
18        
19    
20    </body>
21
22</html>

css
1コード* {
2    margin: 0;
3    padding: 0;
4    box-sizing: border-box;
5    
6}
7
8html {
9    background-color: #fff;
10    color: #555;
11    font-family: 'Lato', 'Arial', sans-serif;
12    font-weight: 300;
13    font-size: 20px;
14    text-rendering: optimizeLegibility;
15}
16
17.row{
18    max-width: 1140px;
19    margin: 0 auto;
20}
21
22header {
23    background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(img/hero.jpg);
24    background-size: cover;
25    background-position: center;
26    height: 100vh;
27}
28
29.hero-text-box {
30    position: absolute;
31    width: 1140px;
32    top: 50%;
33    left:50%;
34    transform: translate(-50%, -50%);
35}
36
37h1 {
38    margin: 0;
39    color: #fff;
40    font-size: 240%;
41    font-weight: 300;
42    text-transform: uppercase;
43    letter-spacing: 1px;
44    word-spacing: 4px; 
45
46}
47
48.btn {
49    display: inline-block;
50    padding: 10px 30px;
51    font-weight: 300;
52}
53

css
1コード.section {
2	clear: both;
3	padding: 0px;
4	margin: 0px;
5}
6
7/*  GROUPING  ============================================================================= */
8
9.row {
10    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
11}
12
13.row:before,
14.row:after {
15    content:"";
16    display:table;
17}
18.row:after {
19    clear:both;
20}
21

上記の画像のように別の部分が変更されてしまいます。
transform: translate(-50%, -50%);
このようにtrnasformを使うと文字だけが移動してしまって、.hero-text-boxクラスに含まれるh1のpaddingやmarginなどを変えても反映されません。
どうすればよいでしょうか。

上記の画像のようにbtnクラスのI’m hungryという部分を囲みたいのですが
下の図のように囲んだ部分が別の場所に表示されてしまいます。

Lhankor_Mhy

2021/03/15 08:17

HTMLをご提示ください。

maisumakun

2021/03/15 08:18

> .hero-text-boxクラスに含まれるh1のpaddingやmarginなどを変えても反映されません。「どのようにしたい」ものが「実際にはどうなる」のでしょうか？

tarah

2021/03/15 08:25

boxで囲んだり、paddingやmarginを変更したいです。

Lhankor_Mhy

2021/03/15 08:31

margin が効かないという現象を確認できませんでした。 h1{margin:100px}などとすれば、表示が変化しました。問題が再現するコードをご提示ください。

maisumakun

2021/03/15 08:34

「行いたいレイアウト」と「現状ではどの部分が意図通りになっていないのか」、もう少し具体的に書いていただけないでしょうか？

tarah

2021/03/15 09:04 編集

説明不足で申しわけございません。　質問内容を編集しましたのでご覧ください。

Lhankor_Mhy

2021/03/15 09:10

ボーダーをつけたいってことでしょうか？当方で試したところ、問題なくボーダーが付きました。 .btn { display: inline-block; padding: 10px 30px; font-weight: 300; border: 1px solid white; } おそらく、ご提示いただいていない部分に原因があると思われます。

tarah

2021/03/15 09:14

cssのコードを全て載せさせていただきました。

tarah

2021/03/15 09:17 編集

ちなみに赤い矢印で示したように青い枠がずれているのは何故なのでしょうか？

tarah

2021/03/15 09:29

grid.cssのコードも追加しておきました。

tarah

2021/03/16 00:51

borderはつくのですがh1やbtnクラスの周りに青い枠が出現しないのが疑問です。