How do I change top margin of a page without affecting top margin of a component?

Question

I am building a responsive web-dev portfolio using React. Everything has been relatively straight forward thus far except for a couple issues with CSS. Right now, I want my top margin to be at 20px for my home page and contact page but everytime I try to adjust it, my navbar component inherits the same margin, leaving this ugly gap on the top of it. Since it is not contained within the element I am applying the change to, I am not sure why my navbar's top-margin is adjusting. Here is the relevant

//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;
}

This is my navbar component:

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>
  )
}

This is my homepage:

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>
        </

Any CSS wizards can tell me what I've done wrong? I'm pretty sure it's a simple fix but I am totally stuck...
Here is the code if you want to look at it in full: https://github.com/caseycling/portfolio

First of all I can't see where are you trying to set the `margin` to `20px;`. And second: can you provide a screenshot so we have a better image of what is going wrong? :) — Berci, Feb 03 '20 at 22:35
Can you not use padding? By definition the margin should be outer distance and padding the inner distance. What you describe sounds like you need the inner distance, I recommend using a padding-top — Julian Kleine, Feb 04 '20 at 16:57

score 0 · Answer 1 · answered Feb 04 '20 at 00:37

0

This is caused by margin collapsing, I will use flexbox to solve this problem.

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

check this link for more information: Margin-Top push outer div down

answered Feb 04 '20 at 00:37

Andrew - oahehc

511
1
4
13

How do I change top margin of a page without affecting top margin of a component?

1 Answers1