One block element is pushing the other off screen

Question

I've got a header inside a div (.header) and underneath that I've got another div (.block) element for the main text and menu.

When I try to make more space between the .header div and the .block div by either adding a bottom margin to the header or top margin to the block, it results in the header getting pushed off screen.

Another problem that I have is that the div block is sort of a "horizontal column" that goes through the page with text on it, and I'd like to add another div element assigned to the same class underneath it with some padding between them, but when I do so, it just turns into one large block.

It might sound confusing, but here is the code. If you add another div underneath the .block div, you'll see what I mean. Likewise if you try to create space between the header and block divs, you'll see that the header is getting pushed off screen.

Also, how can I make the block divs stretch all the way across the page. I read that I could use position: absolute; - it certainly works, but then when I create another div (the one that's supposed to go underneath), it just lays on top of the first one.

Would love to hear what you guys think is wrong.

body {
  background: url(img/shunryu.png);
  background-color: black;
  background-size: cover;
  font-family: Georgia, sans-serif;
  font-weight: 200;
  /* overflow: hidden; */
}

h1 {
  font-size: 30px;
}

#header {
  font-size: 400%;
  color: white;
  padding: 10px;
  padding-left: 60px;
}

.block {
  font-size: 125%;
  line-height: 170%;
  width: 100%;
  height: 500px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 70%, #e5ede8 70%, #e5ede8 100%);
}

.block h1 {
  color: #e5ede8;
  padding: 30px 0px 15px 70px;
  border-bottom: dashed 1px gray;
}

.block p {
  padding: 10px 30px 30px 70px;
  width: 60%;
}

.menu {
  float: right;
  padding-right: 250px;
  padding-top: 100px;
  color: white;
  text-align: center;
  line-height: 300%;
  font-size: 125%;
  color: black;
}

a:link {
  color: black;
  text-decoration: none;
}

a:hover {
  color: white;
}

<div id="header">
  <p>Header title</p>
</div>
<div class="block">
  <div class="menu">
    <a id="one" href="about.html">About</a><br>
    <a id="two" href="contact.html">Contact</a><br>
    <a id="three" href="donate.html">Donate</a><br>
  </div>
  <h1>Header 1</h1>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut</p>
</div>

Answer 1

I think they way you started was wrong. To many mistakes in your ordering and espacially CSS. You used overflow:hidden; which will remove the scroll ability. If you just want to hide the scrollbar, give it a width of 0. Because of that, you items where correctly aligned, but you couldnt see it as it was outside of the window.

Next, if you want to have a large fontsize use em. For 4 times as large 4em.

Having a white font-color on a white background is also not a good idea. Style the abckground of the body in the color you want, not the conent box. Instead give the header a black background.

I posted you a beginner friendly "frame" which saved as much from your code which was salvagable to work effienctly with.

body {
  background: url(img/shunryu.png);
  background: linear-gradient(to right, #ffffff 0%,#ffffff 70%,#e5ede8 70%,#e5ede8 100%);
  background-size: cover;
  font-family: Georgia, sans-serif;
  font-weight: 200;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 30px;
}

#title {
  font-size: 4em;
  background-color: black;
  color: white;
  padding: 10px 10px 10px 60px;
  height: auto;
  width: auto;
}

#menu {
  text-align: center;
  font-size: 1.25em;
  color: black;
}

.menuLink {
  text-align: center;
  padding: 5px;
  margin: 0 10px 0 10px;
  text-decoration: none;
  color: black;
}

.menuLink:hover {
  text-align: center;
  padding: 5px;
  margin: 0 10px 0 10px;
  text-decoration: none;
  color: grey;
}

#content {
  margin: 0;
  padding: 10px 20px 0 20px;
}

.section {
  border: 1px solid black;
  padding: 5px;
    margin: 0 0 10px 0;
}

<body>
  <header>
    <div id="title">Header title</div>
    <div id="menu">
      <a class="menuLink" href="about.html">About</a>
      <a class="menuLink" href="contact.html">Contact</a>
      <a class="menuLink" href="donate.html">Donate</a>
    </div>
  </header>
  <div id="content">
    <div class="section">
      <h1>Titel 1</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
    </div>
    <div class="section">
      <h1>Titel 2</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
    </div>
  </div>
</body>