Why won't the margin on the top change?

Question

I am trying to edit the margin on the nav bar links, however when I change the margin, nothing happens. Does anyone know why this is happening?

/* Whole Page or not one specific section */
main {
  text-align: center;
}

body {
  max-width: 100%;
  height: 100vh;
  margin: 0px 0px 0px 0px;
  color: #C2D3CD;
}

.topbar, nav {
  background-color: #847E89;
}

/* Top Bar */
#temp-logo, #donate-top {
  display: inline-block;
}

#donate-top {
  float: right;
  padding-right: 2%;
  padding-left: 2%;
  background-color: #C2D3CD;
  color: #847E89;
  height: 10vh;
  cursor: pointer;
}

.donate-name {
  padding-top: 4vh;
  background-color: #C2D3CD;
  border: none;
  cursor: pointer;
}

#temp-logo {
  padding-top: 0vh;
  margin-left: 2%;
  font-size: 22px;
}

.topbar {
  display: block;
  border-bottom: solid 1px #C2D3CD;
  height: 10vh;
}

/* Nav Bar */
nav {
  text-align: center;
  height: 7vh;
}

.link, link:visited {
  color: #C2D3CD;
  text-decoration: none;
}

#mission-link, #about-link, #donations-link, #contact-link {
  margin-top: 5%;
}

/* First Page */
#home-screen {
  background-image: url(Images/beach-background-1-NEW.jpg);
  height: 80vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
}

.text {
  padding-top: 30vh;
}

/* Gallery */
.img {
  width: 20vw;
  height: 20vw;
}

.desc {
  display: inline-block;
  position: relative;
  margin: 1%;
}

.desc:hover img {
  filter: blur(1.5px) brightness(60%);
  transition: 0.3s;
  box-shadow: 0 0 10px gray;
}

.desc :not(img) {
  position: absolute;
  top: 37%;
  z-index: 1;
  text-align: center;
  width: 100%;
  color: #FFF;
  opacity: 0;
  transition: 0.3s;
}

.desc:hover :not(img) {
  opacity: 1;
}

.img:hover {
  transform: scale(1.1);
}

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
    <title>Conejo Teen Organization</title>
  </head>
  <body>
    <!-- Top Bar -->
    <div class="topbar">
      <!-- Get logo ASAP -->
      <p id="temp-logo"><em>Conejo Teen Organization</em></p>
      <a id="donate-top" class="donate" href="#"><button class="donate-name">Donate</button></a>
    </div>
    <!-- Nav -->
    <nav> 
      <a id="mission-link" class="link" href="#">Mission</a>
      <a id="about-link" class="link" href="#">About Us</a>
      <a id="donations-link" class="link" href="#">What We Do</a>
      <a id="contact-link" class="link" href="#">Contact</a>
    </nav>
    <!-- Main -->
    <main>
      <!-- First Section -->
      <section id="home-screen">
       <article class="text">
        <h1 id="h1">Conejo Teen Organization</h1>
        <p id="h1-desc">Helping California teens in need since 2017</p>
        <button id="donate-home" class="donate">Donate Now!</button>
        </article>
      </section>
      <!-- Our Mission -->
      <section id="mission">
        <h2 id="mission-h2">Our Mission</h2>
        <p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
      </section>
      <!-- Image Gallery (images of projects) -->
      <section id="gallery">
        <h2 id="images">Gallery</h2>
        <!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
        <div class="row1 row">
          <!-- Image 1 -->
          <div class="desc-1 desc">
            <img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 2 -->
          <div class="desc desc-2">
            <img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 3 -->
          <div class="desc desc-1">
            <img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
        </div>
      </section>
    </main>
    <!-- Footer -->
    <footer>
      <p id="copyright">&copy 2018 Conejo Teen Organization</p>
      <p id="my-credit">Created by <a href="#">Jacob Pieczynski</a></p>
    </footer>
  </body>
</html>

Possible duplicate of [Why does margin-top work with inline-block but not with inline?](https://stackoverflow.com/questions/19153573/why-does-margin-top-work-with-inline-block-but-not-with-inline) — cela, Jul 03 '18 at 16:33

score 5 · Accepted Answer · answered Jul 03 '18 at 16:31

You're trying to apply margin-top to inline elements which you can't do since it would disrupt the flow of the page:

#mission-link, #about-link, #donations-link, #contact-link {
  display: inline-block; /* Try making them inline block */
  margin-top: 5%;
}

Try making the links inline-block.

score 2 · Answer 2 · answered Jul 03 '18 at 16:31

2

Add display: inline-block like:

#mission-link, #about-link, #donations-link, #contact-link {
  margin-top: 5%;
  display: inline-block;
}

I have checked your code remove: height: 10vh; from topbar class

answered Jul 03 '18 at 16:31

Manav

553
7
18

Why remove the height from it? – Jacob Pieczynski Jul 03 '18 at 16:44

Why won't the margin on the top change?

2 Answers2