How can I center my main blog content?
Question
Currently my blog is split into two horizontal sections. The main content and a right-hand sidebar.
I'd like to center the main content whilst reducing the width of the sidebar so I can keep it.
How can I do this?
I've tried adding margin-left:16% to .content but I believe this is the incorrect way to do things.
Demo at: https://www.moneynest.co.uk/how-to-choose-a-broker/
Note: I'm running Wordpress with a custom genesis theme using Bootstrap.
My stripped page code is:
<html>
<body class="post-template-default single single-post postid-594 single-format-standard logged-in admin-bar no-customize-support nolayout windows chrome override" itemscope itemtype="http://schema.org/WebPage"><div class="site-container">
<div class="site-inner">
<div class="content">
<div id="container">
<div class="central-container">
<div class="middle-content">
<div class="inner-post-head">
</div>
<div class="data-content">
<!--MAIN CONTENT HERE -->
</div><!-- End .middle-content -->
</div>
</div><!-- End #container -->
</div><!-- End #content -->
<aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar" itemscope itemtype="http://schema.org/WPSideBar" id="genesis-sidebar-primary"><h2 class="genesis-sidebar-title screen-reader-text">Primary Sidebar</h2><section id="text-9" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget">
<!--SIDE BAR CONTENT HERE--></div>
<!--<div id="popular-articles">
<p class="popular-articles-text">Popular articles</p>
</div>-->
</div>
</div>
</div>
<section id="text-10" class="widget widget_text"><div class="widget-wrap"
</div></section>
</div>
</aside>
<!--END OF SIDEBAR--!>
<!--FOOTER STUFF-->
</body>
</html>
2 answers
solution1
3 ACCPTED 2017-01-26 15:29:58
To center the .content div you can simply use:
.content{
margin:0 auto;
}
or
.content {
margin-left:auto;
margin-right:auto;
}
The "auto" statement does the trick. ;)
solution2
0
Make sure the missing bracket is not throwing things off. I added the bracket to the code(indicated in bold)
</div>
<section id="text-10" class="widget widget_text"><div class="widget-wrap"**>**
</div></section>
</div>
</aside>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.