Как изменить верхнее поле страницы, не влияя на верхнее поле компонента?

Question

Я создаю адаптивное портфолио для веб-разработчиков с помощью React. Пока что все относительно просто, за исключением пары проблем с CSS. Прямо сейчас я хочу, чтобы моя верхняя граница составляла 20 пикселей для моей домашней страницы и страницы контактов, но каждый раз, когда я пытаюсь настроить ее, мой компонент navbar наследует одну и ту же границу, оставляя этот уродливый пробел сверху. Поскольку он не содержится в элементе, к которому я применяю изменение, я не уверен, почему корректируется верхний край моей панели навигации. Вот соответствующий

//Home page styling

#homeContainer {
   margin-top: 10px;
   margin-left: 16%;
   margin-right: 10%;
   padding: 40px;
   border: 3px solid black;
    }

//Navbar styling 

.navContainer {
  margin-top: 0px;
}

Это мой компонент navbar:

const Navbar = () => {
  render()
  return (
    <div className="navContainer">
      <div style={{ background: Background }}>
        <ul className="navList">
          <li className="navName">Casey Cunningh</li>
          <li><img src={Profile} alt="project" className="navImage" /></li>
          <li><Link to='/' className="navLink">Home</Link></li>
          <li><Link to='/projects' className="navLink">Projects</Link></li>
          <li><Link to='/contact' className="navLink">Contact</Link></li>
          <div className="logoContainer">
            <li>
              <a href="https://github.com/caseyclin" target="_blank" rel="noopener noreferrer">
                <img src={Github} alt="gitHub" id="navLogo" /></a>
            </li>
            <li>
              <a href="https://www.linkedin.com/in/casey-clin-b670b5177/" target="_blank" rel="noopener noreferrer">
                <img src={Linkedin} alt="linkedIn" id="navLogo" /></a>
            </li>
          </div>
        </ul>
      </div>
    </div>
  )
}

Это моя домашняя страница:

const Home = () => {
    render()
    return (
        <div>
            <div id="homeContainer">
                <h1 id="homeHeader">Hi! Im Casey</h1>
                <h5 id="homeTitle">FRONT END DEVELOPER</h5>
                <p style={{ marginRight: "10%" }}>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</p>
            </div>
        </

Любой волшебник CSS может сказать мне что я сделал не так? Я уверен, что это простое исправление, но я полностью застрял ...
Вот код, если вы хотите взглянуть на него полностью: https://github.com/caseycling/portfolio

Answer 1

Это вызвано свертыванием полей, для решения этой проблемы я буду использовать flexbox.

/* @App.css */
.App {
  display: flex;
}

проверьте эту ссылку для получения дополнительной информации: Margin-Top pu sh external div down