CODEWITHSUNDEEP
htmlcss
Simon
Simon

Reputation: 37

How to get my div outside wrapper, but text inside?

Like this: enter image description here I'm trying to make the blue text where it says join our discord server in width 100% when its inside wrapper, It's inside wrapper to get the text to match up with the wrapper

Upvotes: 0

Views: 170

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

You apply a background-color to the full-width element, then wrap the inner text that you want contained in another element that matches whatever the width of your content section is. Here's an example to match your screenshot. .viewport will be the class that defines the width of the actual content - just nest that inside of elements that you want to be full-width.

.container {
  background: #09c;
  color: #fff;
}

.viewport {
  width: 80%;
  max-width: 960px;
  margin: auto;
}

.content {
  background: #eee;
  padding: 1em 0 0;
}

.content .viewport {
  background: #fff;
}
<div class="container">
  <div class="viewport">Join our discord server</div>
</div>

<nav class="viewport">navigation</nav>

<div class="content">
  <div class="viewport">content section<br>content section</div>
</div>

Upvotes: 1

Related Questions