javascript - React: Child Component div も兄弟に適用されます。なんで？

Question

これは、私のコンポーネントの 1 つの render メソッドです。

  render() {
    return (
      <div className="left col-xs-12 col-md-6">
        <Dropdown show={this.state.showDropdown}/>
        {this.props.children}
      </div>
    );
  }

これは、全画面表示のドロップダウン メニューといくつかの子を持つ単なる div です。の場合showDropdown===true、ドロップダウン メニューが表示されます。このコンポーネントが使用されているページの 1 つで、直下の子のフォーマットに問題があるため、padding: 50px. これで問題は解決しました。しかし今、ドロップダウン コンポーネントも 50px のパディングを取得し、ドロップダウン メニュー項目を下に移動し、ドロップダウンの書式設定を台無しにしますが、理由がわかりません。これは正常な動作ですか？

親の CSS:

.left {
  display: flex;
  justify-content: center;
  align-items: center;

  // background-color: MediumSpringGreen;
  background-color: $color_left;

  height: auto;
  min-height: 100vh;

  z-index: 1;
  @include media-breakpoint-up(md) {
    height: 100vh;
  }
}

子供のコード

render() {
  return (
    <div className="row">
    <Loader show={this.state.loading} />
    <Left> 
      <div className="about_padding">
        <p className="red big-box-text-two">Text text text</p>
        <a className="menu-link statementbox" id="menu-statement" href="./pdf/statement.pdf" download="statement.pdf">
          <p className="menu-link-text">our statement</p>
          <img className="img-fluid download-img" src={imgDownload} alt="download"></img>
        </a>
      </div>
    </Left>
}

子の CSS:

.statementbox {
  margin-top: 20px !important;
}

.about_padding {
  padding-left: 15%;
  padding-right: 15%;
  //I was trying to add padding-top here, but it also pushes down my Dropdown

  @include media-breakpoint-down(xs) {
    padding-left: 10%;
    padding-right: 10%;
  }
}

ドロップダウンのコード:

const Dropdown = ({show}) => 
<div className="dropdown"
style={{
        visibility: show ? "visible" : "hidden",
        opacity: show ? 1 : 0
        }}>
  <Link to="/">Home</Link>
  <Link to="/menus/">Menus</Link>
  <Link to="/about/">About us</Link>
  <Link to="/contact/">Contact</Link>
</div>

ドロップダウンの CSS:

.dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  font-size: 40px; 
  background-color: #FFD826; 
  position: absolute;
  height: 100%; 
  width: 100%;
  z-index: 2;

  a {
    color: #f42528 !important; 
  }
}