Yes, that’s what I meant. Yep, those are the trigger buttons. The tab content appears inside the box, sorry about the ambiguity, here’s a clearer concept illustration.
I’ve made the text a bit bigger for clarity. And I think we should have a button that allows the user to switch it to all dark text, if they wish. Have you checked that your monitor is dust and muck free, it could just be that? Because I showed it to a neigbour, and they said it was legible… let me know 
The tab content displays global and also local news, and can switch between these.
Do you mean that the tab should be inside the box, in terms of semantic structure? That seems to make sense, but how on earth do I put all the code inside the div box?
Here’s the code so far, I tried to modify your code a bit, hope it’s alright! 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>heaven.org</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1 {
font-family: monospace;
text-align: center;
color: rgb(255, 255, 129);
margin: 2em;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
max-width: 65em;
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.wrap > div {
flex: 1 1 40%;
min-width: 15em;
max-width: 30em;
border: rgb(204 255 255) 1.8px solid;
margin: 1.5em;
padding: 0 1em;
}
.wrap h2 {
margin: .5em 0;
font-size: 0.8em;
font-family: monospace;
color: rgb(215, 215, 215);
text-decoration: underline;
}
.wrap div li {
margin:.5em 0;
color: rgb(185, 185, 185);
font-size: 0.85em;
font-family: monospace;
}
/* Style the tab */
.wrap .tabs{
padding:0;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
font-family: monospace;
font-size: 0.85em;
color: rgb(255, 255, 129);
display:inline-block;
border: none;
outline: none;
cursor: pointer;
padding: 7px 8px;
transition: 0.3s;
}
.tab button:hover{background: rgb(156, 209, 224);}
button.active{background: rgb(156, 209, 224);}
/* Style the tab content */
.tabcontent {
display: none;
padding:0 1em;
border: 0px solid #ccc;
border-top: none;
margin:.5em 0;
color: rgb(0, 0, 0);
font-size: 0.85em;
font-family: monospace;
}
</style>
</head>
<body>
<h1>Melbourne, AU</h1>
<div class="wrap">
<div class="News feeds">
<h2>News</h2>
<ul>
<li>Front Page</li>
<li>Political</li>
<li>Finance</li>
<li>Sports</li>
<li>Entertainment</li>
<li>Trending Online</li>
<li>Public Opinion Poll vote!</li>
</ul>
</div>
<div class="tabs">
<!-- Tab links -->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Global')">Global</button>
<button class="tablinks" onclick="openCity(event, 'Local')">Local</button>
</div>
<!-- Tab content -->
<div id="Global" class="tabcontent">
<h3></h3>
<p>abcdefg.</p>
</div>
<div id="Local" class="tabcontent">
<h3></h3>
<p>wxyz.</p>
</div>
</div>
<div class="Useful feeds">
<h2>Useful</h2>
<ul>
<li>Time</li>
<li>Weather</li>
<li>Alexandra</li>
<li>Alfred</li>
<li>Q&A</li>
<li>Evolve</li>
</ul>
</div>
<div class="Interest feeds">
<h2>Interest</h2>
<ul>
<li>Local Photo</li>
<li>TV and Cable</li>
<li>Film</li>
<li>Book</li>
<li>Game</li>
<li>Car</li>
<li>Wine</li>
</ul>
</div>
<div class="Market feeds">
<h2>Market</h2>
<ul>
<li>Local Food/Drink Deals</li>
<li>Local Clothing Deals</li>
<li>Other Local Deals</li>
<li>Garage Sale</li>
<li>Call in a Favour</li>
</ul>
</div>
</div>
<script>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active","");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
)