如何防止元素重叠并分开显示？

Question

我在页面上有2个元素，分别是应用程序标题和库 出于某种原因，图库从页面顶部开始，并且应该在标题的紧后位置

我尝试了几种CSS属性，但都不起作用。 我已经提供了问题的图片。

app.js on react
 <StickyHeader

              header ={
                <div className="app-root">
            <Modal 
                     show = {this.state.Expand}
                     modalClosed = {this.CloseModal}
                     img = {this.state.img}>
            </Modal> 
                <div className="app-header">
                <h2>Flickr Gallery</h2>

              <div className = "app-header-input" >
                <div className = "app-header-input_sides">
                <p>Search by tag name </p>
                  <input 
                    className="app-input" 
                    onChange={event => {this.onSearchHandler(event.target.value)}}
                    value ={this.state.tag}
                    />
                </div>
                <div className = "app-header-input_sides">
                <p> Filter images </p>
                <input 
                    className="app-input"
                    placeholder = "Filter by title or description"
                    onChange={event => {this.onFilterHandler(event.target.value)}}
                    value = {this.state.filterSearch} 
                    />
                </div>
              </div>
            </div>

              </div>
              }
            >
            </StickyHeader>
            <div>
              <Gallery 
                  tag={this.state.searchTerm}
                  ExpandImage = {this.Expend.bind(this)}
                  filter = {this.state.filterExecute}
                  />
            </div>

this is the css 
.app-root {
  text-align: center;
}

.app-header {
  background-color: #222;
  padding: 10px;
  color: white;
  font-size: 15pt;
  text-align: center;
  transition:all .5s;
}

.app-input {
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 8px;
  color: #666;
  width: 400px;
  margin-bottom: 30px;

}

.gallery-root {
  //text-align: center;
  display: flex;
  flex-wrap:wrap;
  justify-content:space-around;
}

.gallery-header {
  background-color: #222;
  padding: 10px;
  color: white;
  font-size: 20pt;
}

.gallery-intro {
  font-size: 15pt;
}

我要在这里实现的目的是在不同的块中显示内容，而不会重叠。