Why does it affect other classes when you use margins

Question

I only want to give margins to the loginContainer class, but it also affects Navbar why?

#loginContainer {
  width: 500px;
  height: 400px;
  background-color: #CCCCCC;
  text-align: center;
  margin: 100px auto;
}

#navbar {
  width: 100%;
  height: 50px;
  overflow: hidden;
  box-shadow: 2px 2px 1px 1px #CCCCCC;
  background-color: white;
  position: fixed;
}

<div id="navbar">
  <div id="navbarLeft">
  </div>enter code here
  <div id="navbarMenu">
    <ul>
      <li class="menuCell">LGN</li>
      <li class="menuCell">BBS</li>
    </ul>
  </div>
</div>
<!-- login form section -->
<div id="loginContainer">
  <div id="loginBox">
    <h1 class="loginText">Login</h1>
    <input type="text" class="inputBox" placeholder="ID" name="userID" maxlength="20">
    <input type="password" class="inputBox" placeholder="PASSWORD" name="userPassword" maxlength="20">

  </div>
</div>

Are you using any CSS library? – Khaled Feb 06 '19 at 12:51 — Khaled, Feb 06 '19 at 12:51

score 1 · Answer 1 · edited Feb 06 '19 at 13:04

Add css on #navbar ( top: 0;left : 0 ; right : 0), this will help you.

#loginContainer{
    width: 500px;
    height: 400px; 
    background-color: #CCCCCC;
    text-align: center;
    margin: 100px auto;
}
#navbar{
    width: 100%;
    height: 50px;
    overflow: hidden;
    box-shadow: 2px 2px 1px 1px #CCCCCC;
    background-color: white;
    position: fixed;
    top: 0;
}

    <div id = "navbar">
      <div id = "navbarLeft">
      </div>enter code here
      <div id = "navbarMenu">
          <ul>
              <li class = "menuCell">LGN</li>
              <li class = "menuCell">BBS</li>
          </ul>
      </div>
  </div>
  <!-- login form section -->
  <div id = "loginContainer">
      <div id = "loginBox">
          <h1 class = "loginText">Login</h1>
          <input type = "text" class = "inputBox" placeholder = "ID" name = "userID" maxlength="20">
          <input type = "password" class = "inputBox" placeholder = "PASSWORD" name = "userPassword" maxlength="20">

      </div>
  </div>

Why does it affect other classes when you use margins

1 Answers1