Why is the button outside of the parent container?

user_16430630 0
Viewed 339

Why is the button outside of the parent container? The button shouldn't be outside of the container at all, because the container is always so high that all child elements fit in.

The problem can be fixed by simply pasting this line of code into my CSS. But the margin shouldn't normally be necessary.

.apply-link-container {
      margin-bottom: 5rem;
    }

Even if the solution seems simple. I've been on it for hours and don't know what I did wrong. The button should be inside the container.

.bg-1 {
  background-color: #ccc;
}

.apply-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
}

.apply-section-text {
  max-width: 50rem;
}

.apply-section .apply-link-container {
  margin-top: 2rem;
}
.apply-section a {
  background-color: rgb(250, 187, 120);
  padding: 1rem;
  border-radius: 1rem;
  font-size: 2rem;
  border-bottom: none;
  text-decoration: none;
  color: #fff;
}

.apply-section a:hover {
  background-color: rgb(241, 146, 44);
  border-bottom: none;
}
<section>
        <div class="apply-section bg-1">
          <h2>Lorem</h2>
          <div class="apply-section-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo</div>
          <div class="apply-link-container"><a class="apply-link" href="#">button</a></div>
        </div>
      </section>

css html
2 Answers

You can make the inline <a> element into a block-level element, this way it creates a "block" and the 2rem margin you gave the <a> elements parent isn't a making the content overflow out the bottom. Now the content stays within the parent containers content-box even with the top margin.

.bg-1 {
  background-color: #ccc;
}

.apply-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
}

.apply-section-text {
  max-width: 50rem;
}

.apply-section .apply-link-container {
  margin-top: 2rem;
}
.apply-section a {
  background-color: rgb(250, 187, 120);
  padding: 1rem;
  border-radius: 1rem;
  font-size: 2rem;
  border-bottom: none;
  text-decoration: none;
  color: #fff;
  display: block; /* or inline-block */
}

.apply-section a:hover {
  background-color: rgb(241, 146, 44);
  border-bottom: none;
}
<section>
        <div class="apply-section bg-1">
          <h2>Lorem</h2>
          <div class="apply-section-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo</div>
          <div class="apply-link-container"><a class="apply-link" href="#">button</a></div>
        </div>
      </section>

user_113895810

You can try add this in your container class:

height: fit-content;

user_152767580
Related