Wide open spaces...

[Minx 29]

I hate asking for help because I feel dumb like I should know how to fix my problem but I can't for the life of me figure it out. I'm setting up a new site with myBB, using the Run and Hide theme. I'm modifying it to better fit with what we need but I have some how created a huge gap along the side from the header (where the News and House Points are going to be kept) and I can't figure out how to get rid of it. Here is the site so you can see what I'm talking about:

 

Chasing A Dream

CHASINGADREAM.RPGINITIATIVE.COM

 

Any guidance or help would be appreciated because I'm very rusty when it comes to coding (so dumb it down for me if you can).

[c.widow 123]

Hi @Minxcan you paste the code of your header template here?

[Minx 29]

		<a name="top" id="top"></a>

<div id="topnav">
	
	
	<div>
	<!-- NAVIGATION, JUST POST THE LINK
		   YOU DON'T NEED TO DO ANYTHING ELSE :) -->
		<a href="{$mybb->settings['bburl']}"><strong>Home</strong></a>
		<a href="https://chasingadream.rpginitiative.com/showthread.php?tid=2"><strong>Basics</strong></a>
		<a href="https://chasingadream.rpginitiative.com/showthread.php?tid=3"><strong>Rules</strong></a>
		<a href="https://chasingadream.rpginitiative.com/forumdisplay.php?fid=36"><strong>Archives</strong></a>
		<a href="https://discord.gg/ygudbe3fYN"><strong>Discord</strong></a>
	<!-- END NAVIGATION -->
	</div>
	
	<!-- START MEMBER STUFF -->
	<div id="wb_holder">
		{$welcomeblock}
	</div>
	<!-- END MEMBER STUFF -->
	
	
</div>

<!-- HEADER IMAGE, YOU DON'T WANT
	   TO EDIT THIS, I AM JUST LABELING IT BECAUSE I LOVE YOU -->
	<div id="header-container">
		<div id="header-image">
			<div id="header-link">
				<a href="{$mybb->settings['bburl']}">{$mybb->settings['bbname']}</a>
				<navigation>
			</div>
		</div>
	</div>
<!-- END HEADER IMAGE -->
		
<div id="news-container">
	<div class="wrapper">
	<table width="100%" cellspacing="0" cellpadding="5" style="padding: 10px 0px 10px 0px;">
		<tr>
			<td valign="center" align="left" width="35%" class="tcat">
				News
			</td>
			<td valign="center" align="left" width="15%" class="tcat">
				House Points
			</td>
			
		<tr class="forum_container">
			<td valign="top" align="top" id="news">
				<div style="height: 135px; overflow: auto; text-align: justify; padding-right: 5px;">
					
					
					
					
					<!-- NEWS AREA, YOU CAN PUT <strong></strong>
						   TAGS AROUND THE DATE TO MAKE IT APPEAR
						   BOLD AND IN A DIFFERENT COLOR -->
					<strong> 1.6.22 -</strong>We are currently looking for students of all houses!</p>
					<strong>12.29.21 - </strong>We are soft open!</p>
					<strong>12.28.21 -</strong>Our site is under construction!</p>
				

					<!-- END NEWS AREA -->
					
					
					
					
		</div>
			</td>
					
						<td valign="top" align="top">
						
						
						
						<!-- STAFF IMAGES -->
<style>.hufflepuff { width: 90px; height: 100px; background-image: url('https://i.postimg.cc/L4kTwH2t/huff-crest-1.png');}
.gryffindor { width: 90px; height: 100px; background-image: url('https://i.postimg.cc/zGvFyKW7/gryff-crest-1.png');}
.ravenclaw { width: 90px; height: 100px; background-image: url('https://i.postimg.cc/TYR9XZ3Z/raven-crest-1.png');}
.slytherin { width: 90px; height: 100px; background-image: url('https://i.postimg.cc/rFQ9yQdz/slyth-crest-1.png');}
.tablebottom-hover { opacity: 0; transition-duration: 1s; -moz-transition-duration: 1s; -webkit-transition-duration: 1s;}
.tablebottom-hover:hover { opacity: 1; }

.tablebottom-text {
color: white;
background-color: #242424;
font-size: 35px;
text-align: center;
padding: 28px 0px;
}

table.table_grid td, table td
{
	padding: 0 0 0 0;
}
</style>

<!–– EDIT HOUSE POINTS HERE ––> 
<center><table>
                                <tr><td>
                                    <div class="hufflepuff"><div class="tablebottom-hover">
<div class="tablebottom-text">0</div>
                                          </td> </div></div>
                                    
                                    <td>
                                        <div class="ravenclaw"><div class="tablebottom-hover">
<div class="tablebottom-text">0</div>
										
											</td></div>
                                    <td>
                                        <div class="slytherin"><div class="tablebottom-hover">
<div class="tablebottom-text">0</div>
</div>
                                            </div>
<td>
                                        <div class="gryffindor"><div class="tablebottom-hover">
<div class="tablebottom-text">0</div>
</div>
	
						<!-- END STAFF IMAGES -->
						
						
						
			</td>
			<td valign="top" align="top">
	
		</td>
		</tr>
	<tr>
<br>
		<br><center>As advertised on: <br>
<a href="http://rpg-directory.com/index.php" target="_blank"><img src="https://files.jcink.net/uploads/rpgdirectory/RPGD_Buttons/rpgdbutton1.png" title="RPG-Directory" alt="RPG-D" width="88px" height="31px"></a>
<a href="https://rpginitiative.com" target="_blank"><img src="https://images.rpginitiative.com/buttons/logo88/mainbutton.png" title="RPG Initiative - Community for all Roleplayers" alt="RPG Initiative" /></a></center>
<center>RPG Rating: <br><a href="http://rpgrating.com"><img src="http://rpgrating.com/ratings/333.png"  alt="RPG Rating 3 3 3"/></a></center>
	</br>
		</br></tr>
		</table>
</div>
		</div>

	{$as_sidebar}<div id="container">
				<div id="content">
			<div class="wrapper">
				{$pm_notice}{$pm_switch_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
					<br>
					
					{$headerad}

 

[c.widow 123]

@Minx there are a lot of unnecessary ending tags for elements AS WELL AS a lot of starting tags that are never ended (i.e. </tr>, </td>, etc.).

I would suggest cleaning up the code to fix this issue. JSFiddle is a nice little tool that will highlight things in red that it thinks are possible errors. If you need additional assistance please add me on Discord as I do not check this forum often due to time constraints, my discord is connected to my phone so I receive notifications immediately. c.widow#6666

 

This particular issue here  shows a <tr> that was never ended and then creates another <tr> for the forum. Which is probably the gap you are talking about.

		<tr>
			<td valign="center" align="left" width="35%" class="tcat">
				News
			</td>
			<td valign="center" align="left" width="15%" class="tcat">
				House Points
			</td>
		

[Minx 29]

Thank you for your reply and pointing that out to me. That didn't fix it, but I cleaned up some of the coding and shifted things around a bit (moved the House Points out of the News Container) and now it looks more like I wanted it to. It's not perfect but it will work. Thank you again for your help.

[c.widow 123]

You're welcome! 🙂

You can reach out to me on Discord with details to admin panel if you would like me to dive in and investigate further. I could probably get it how you're wanting it to display :)

c.widow#6666