Adding Margin Moves Element and Dumps Content

Hm. Well, I copied it the way it was from the theme’s style.css to custom.css. That confused me, too, but figured the person who made the theme knew better than me.

A lot of stuff in the style sheet is like that, too.

It uses:

main,
#sidebar1,
#sidebar2 {
	padding: 1rem;
}

And earlier in the stylesheet, it has this:

body {
	background: #e8e8e8;
	color: #333;
	line-height: 1.4;
	margin: 1rem;
	text-rendering: optimizeLegibility; /** aestheticallyloyal.com/public/optimize-legibility */
}

::-moz-selection {
	background: #333;
	color: #ccc;
}

::selection {
	background: #333;
	color: #ccc;
}

a {
	color: #888;
}

a:focus,
a:hover {
	color: #333;
}

a:not([href]) {
	cursor: default;
}

abbr[title] {
	cursor: help;
}

address {
	font-size: smaller;
	font-style: normal;
}

blockquote {
	border: thin solid #333;
	box-shadow: 0 .12rem .25rem rgba( 0, 0, 0, .25 ) inset;
	padding: 1rem;
}

blockquote blockquote {
	margin: 0 0 1rem;
}

dt {
	font-weight: bold;
}

ol ol {
	list-style: lower-alpha;
}

ol ol ol {
	list-style: lower-roman;
}

nav ul,
nav ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

pre {
	border: thin solid #333;
	box-shadow: 0 .12rem .25rem rgba( 0, 0, 0, .25 ) inset;
	font-size: smaller;
	padding: 1rem;
}

table {
	max-width: 100%;
}

td {
	border: thin solid #333;
	padding: .5rem;
}

textarea {
	resize: vertical;
}

embed,
iframe,
object,
video {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}

video {
	height: auto;
}

All without class or id markers.

So my problem is definitely occurring because of this weirdness with main?

I posted my problem in the InkBlot theme help board before I posted here, but noticed that the developer hasn’t responded in a very long time.

I went through the theme’s php files and found this.

<?php
/** The main template file.
 *
 * If you're using Webcomic you'll want to look at
 * /webcomic/index.php
 *
 * @package Inkblot
 */

get_header(); ?>

<main role="main">
	<?php if ( have_posts() ) : ?>
		<?php inkblot_posts_nav( 'above' ); ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<?php get_template_part( 'content', get_post_format() ); ?>
		<?php endwhile; ?>
		<?php inkblot_posts_nav( 'below' ); ?>
	<?php elseif ( current_user_can( 'edit_posts' ) ) : ?>
		<header class="page-header">
			<h1><?php _e( 'No Posts', 'inkblot' ); ?></h1>
		</header><!-- .page-header -->
		<div class="page-content">
			<p><?php printf( __( 'Ready to publish your first post? <a href="%s">Start here &raquo;</a>', 'inkblot' ), admin_url( 'post-new.php' ) ); ?></p>
		</div><!-- .page-content -->
	<?php else : ?>
		<?php get_template_part( 'content', 'none' ); ?>
	<?php endif; ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

More strangely, I can make the border ABSURDLY HUGE (it’s set at 15px from my testing stuff) without making anything drop to the bottom. Even a 1px margin, though, screws everything up.