Title: Adding Margin Moves Element and Dumps Content
Last modified: August 21, 2016

---

# Adding Margin Moves Element and Dumps Content

 *  [bklick](https://wordpress.org/support/users/bklick/)
 * (@bklick)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/)
 * Hi,
 * I’m trying to spiff up this site: [http://ramen-empire.com/](http://ramen-empire.com/)–
   using InkBlot theme with Webcomic plugin. Love both. =)
 * When I do this:
 *     ```
       main, #sidebar1, #sidebar2 {
       	border:1px solid;
       	border-radius:15px;
       	margin-right:2px;
       	margin-left:2px;
       	margin-top: 0;
       	margin-bottom: 0;
       }
       ```
   
 * Then sidebar1 vanishes. (Sidebar2 is empty right now, so maybe it does, too.)
 * (I have the code commented out right now. I think you can see what I mean with
   F12 in Chrome, though.)
 * What I want is a border around main and both sidebars that neither hugs the text
   or the wall of the page. I can’t quite put my finger on why it’s behaving this
   way.
 * Thanks for any help you all might offer!
 * Bart

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/page/2/?output_format=md)

 *  [Pioneer Web Design](https://wordpress.org/support/users/swansonphotos/)
 * (@swansonphotos)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3790952)
 * is ‘main’ a class:
 *     ```
       .main
       ```
   
 * or an id:
 *     ```
       #main
       ```
   
 * ???
 * main should be one or the other not just ‘main’
 *  Thread Starter [bklick](https://wordpress.org/support/users/bklick/)
 * (@bklick)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3790962)
 * 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.
 *  [Pioneer Web Design](https://wordpress.org/support/users/swansonphotos/)
 * (@swansonphotos)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3790997)
 * body, a, p, table, td, tr, th, section, nav are special ones they work in all
   browsers and re ‘standardized’…(the just of that) ‘main’ is not one of them.
 * when you create in HTML a CSS Class or ID, then in the stylesheet we see .style
   or #style
 * _Edit – saw and looked_
 * We do see this at the top of the theme stylesheet:
 *     ```
       /**
        * Correct <code>block</code> display not defined in IE 8/9.
        */
   
       article,
       aside,
       details,
       figcaption,
       figure,
       footer,
       header,
       hgroup,
       main,
       nav,
       section,
       summary {
           display: block;
       }
       ```
   
 * This dude knows his stuff and does not include ‘main’
 * [http://meyerweb.com/eric/tools/css/reset/](http://meyerweb.com/eric/tools/css/reset/)
 * Consult theme dev.
 *  Thread Starter [bklick](https://wordpress.org/support/users/bklick/)
 * (@bklick)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791048)
 * 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.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791052)
 * Where did you get this theme from?
 *  Thread Starter [bklick](https://wordpress.org/support/users/bklick/)
 * (@bklick)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791054)
 * 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(); ?>
       ```
   
 *  Thread Starter [bklick](https://wordpress.org/support/users/bklick/)
 * (@bklick)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791055)
 * Hi, Andrew!
 * I got InkBlot from here: [http://wordpress.org/themes/inkblot](http://wordpress.org/themes/inkblot)
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791056)
 * > What I want is a border around main and both sidebars that neither hugs the
   > text or the wall of the page. I can’t quite put my finger on why it’s behaving
   > this way.
 * Can you illustrate this for clarity?
 *  Thread Starter [bklick](https://wordpress.org/support/users/bklick/)
 * (@bklick)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791057)
 * I can!
 * [This is a screencap of the mockup the artist gave me.](http://i.imgur.com/0HRtX7s.png)
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791058)
 * > I can’t quite put my finger on why it’s behaving this way.
 * The sidebar can no longer fit aside the main section because it takes up more
   room, from these styles:
 *     ```
       margin-right: 2px;
        margin-left: 2px;
       ```
   
 * Where is the “donate” section?
 *  Thread Starter [bklick](https://wordpress.org/support/users/bklick/)
 * (@bklick)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791059)
 * I haven’t added it yet. He’s going to send me some art to stuff into that box,
   and then I’ll make it. It should be simple, though, if I can figure out how to
   make the boxes all fit.
 * Do you have any ideas on what I could shrink to make room?
 *  Thread Starter [bklick](https://wordpress.org/support/users/bklick/)
 * (@bklick)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791060)
 * 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.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791061)
 * Shrink “main” to a width of something like 77%.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791062)
 * [@seacoast](https://wordpress.org/support/users/seacoast/), first time I’ve seen“
   main” as a HTML5 element too 🙂
 *  Thread Starter [bklick](https://wordpress.org/support/users/bklick/)
 * (@bklick)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/#post-3791063)
 * Is it worth my time to go through the theme’s php files and just rename “main”?
   It seems to be a point of contention. XD

Viewing 15 replies - 1 through 15 (of 19 total)

1 [2](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/page/2/?output_format=md)

The topic ‘Adding Margin Moves Element and Dumps Content’ is closed to new replies.

## Tags

 * [border](https://wordpress.org/support/topic-tag/border/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [margin](https://wordpress.org/support/topic-tag/margin/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 19 replies
 * 3 participants
 * Last reply from: [bklick](https://wordpress.org/support/users/bklick/)
 * Last activity: [12 years, 11 months ago](https://wordpress.org/support/topic/adding-margin-moves-element-and-dumps-content/page/2/#post-3791068)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics