Bootstrap grid question

Hi, on this site: renalmeals.com/responsive

I have two segments that are col-md-12 column, but they are different widths. Here's a screenshot. I can't figure out how to get them the same width.

screenshot
mel200Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GaryConnect With a Mentor Commented:
Replace your gray area with this

<div class="row">
	<div class="col-md-12 column">
		<div style="background-color:#c6c4c5;overflow:auto">



	<div class="col-md-6 column">
		<h2>Variety</h2><p>Renal Meals is a sister site of MagicKitchen.com. Our chefs and nutritionists have been working overtime to meet the need for more delicious frozen renal meals. CEO Greg and President Michelle have listened to our customers and created the MK Meals Special menu to cater to those with health issues. </p>
          <p>The challenge they set forth to the chefs this last year was, "Create tasty, healthy meals for people on renal diets."</p>
        <p>We think our chefs came through with flying colors.</p>
		</div>

	<div class="col-md-6 column">

		<h2>Information</h2> 	
<p>The best short explanation we've seen of renal meals is provided by AAKP: "Prior to starting hemodialysis, patients are often taught how to reduce the amount of protein in their diet with the hope that by doing this, the need for dialysis might be delayed. However, once dialysis is initiated, dietitians begin to do the opposite and educate patients on ways to increase their protein intake."</p>
		  <p>Those are the rules our meals are based on. But the chefs have created meals like Shrimp &amp; Vegetable Linguine, and Cheese Ravioli with Meat Sauce, to create an incredible <a target="_blank" href="http://www.magickitchen.com/info/meal-delivery-service.html">meal delivery service.</a></p><p></p>
		</div>






	<div class="col-md-6 column">

		<h2>Testimonials</h2> <p>"I was so happy that my sister-in-law found your  website. We were at our wits end as our father was told that he had to eat renal meals. I found that your menu fit into what we were looking for. He is  very happy with the renal meals and says that they are very tasty. <br>
		  <br>
		  I have not found  another company that meets the "renal" requirements as well as yours  does. You also prepare a meal that looks and tastes great. The meals are well  balanced and look like that they were prepared by specialists along with Chefs.  My father asked me to order another meal pack just today."<br>
		  </p>
          <p>Kathy V.</p>

	</div>
	<div class="col-md-6 column">

		<h2>Order</h2> <p>Does that make your mouth water? Buy Renal Meals Online.</p>
          <h3><strong><a href="http://www.magickitchen.com/menu/MKMPREREN.html">Order now!</a></strong></h3>
          <p>And read our <a href="10-ways.html">10 ways to eat in moderation on the Renal Diet.</a></p>
          <p>Buying frozen renal meals online is an easy way to get the proper nutrition for your condition. Try us out today!</p>
      <p>&nbsp;</p>

	</div>

</div></div></div>

Open in new window

0
 
Jesus RodriguezIT ManagerCommented:
Can I see the code? Looks like one is outside the wrapper or content wrapper
0
 
GaryCommented:
You have multiple nested rows
See my article for the how to
http://www.experts-exchange.com/A_15179-Bootstrap-Masterclass-Part-1.html

Basically
Container > row > col-xx-x

Not
Container > row > row > col-xx-x
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
mel200Author Commented:
Ok, I see what you mean, Gary, thanks, I'll read the article.
0
 
GaryCommented:
Each row you add moves the margin left and right by 15px, so you need to nest them correctly so the col-xx-x class negates the negative margin.

edit
You can add another row inside the col class
0
 
mel200Author Commented:
Ok, thanks for that. I have it all aligned now, but can't quite figure out why the navigation is still more narrow. I'll keep working at it, but maybe it's obvious to you?
0
 
GaryCommented:
You still have nested rows.
Seperate your content like this, will make it easier to follow

<div class="container">

<div class="row">
Your header bits here
</div>

<div class="row">
Your nav bits here
</div>

<div class="row">
Your body bits here
</div>

<div class="row">
Your footer bits here
</div>

</div>

Open in new window

0
 
GaryCommented:
Looking better
Coupla things...
Your header image is a set width - you should use percentages and set the height to auto

Don't use background colors on row or col- class elements - add a div inside the element and set the background color on that
0
 
mel200Author Commented:
Hi, Gary,

I hadn't made any changes between 13-18 and now. So the comment about still having nested rows is not valid, is that right? I still have a narrow nav, I'll make the changes on the background colors. Thanks.
0
 
mel200Author Commented:
Ok, I took the color style off the row and added another div, but now the row is too wide again. I have:

<div class="container">
      <div class="row clearfix"><div  style="background-color:#c6c4c5;">
            <div class="col-md-6 column"><h2>Variety</h2><p>Renal Meals is a sister site of MagicKitchen.com. Our chefs and nutritionists have been working overtime to meet the need for more delicious frozen renal meals. CEO Greg and President Michelle have listened to our customers and created the MK Meals Special menu to cater to those with health issues. </p>
          <p>The challenge they set forth to the chefs this last year was, &quot;Create tasty, healthy meals for people on renal diets.&quot;</p>
        <p>We think our chefs came through with flying colors.</p>
            </div>
            <div class="col-md-6 column"><h2>Information</h2>       
<p>The best short explanation we've seen of renal meals is provided by AAKP: &quot;Prior to starting hemodialysis, patients are often taught how to reduce the amount of protein in their diet with the hope that by doing this, the need for dialysis might be delayed. However, once dialysis is initiated, dietitians begin to do the opposite and educate patients on ways to increase their protein intake.&quot;</p>
              <p>Those are the rules our meals are based on. But the chefs have created meals like Shrimp &amp; Vegetable Linguine, and Cheese Ravioli with Meat Sauce, to create an incredible <a href="http://www.magickitchen.com/info/meal-delivery-service.html" target="_blank">meal delivery service.</a></p></p>
            </div>
      </div>
      <div class="row clearfix" style="background-color:#c6c4c5;">
            <div class="col-md-6 column"><h2>Testimonials</h2> <p>&quot;I was so happy that my sister-in-law found your  website. We were at our wits end as our father was told that he had to eat renal meals. I found that your menu fit into what we were looking for. He is  very happy with the renal meals and says that they are very tasty. <br />
              <br />
              I have not found  another company that meets the &quot;renal&quot; requirements as well as yours  does. You also prepare a meal that looks and tastes great. The meals are well  balanced and look like that they were prepared by specialists along with Chefs.  My father asked me to order another meal pack just today.&quot;<br />
              </p>
          <p>Kathy V.</p>
            </div>
            <div class="col-md-6 column"><h2>Order</h2> <p>Does that make your mouth water? Buy Renal Meals Online.</p>
          <h3><strong><a href="http://www.magickitchen.com/menu/MKMPREREN.html">Order now!</a></strong></h3>
          <p>And read our <a href="10-ways.html">10 ways to eat in moderation on the Renal Diet.</a></p>
          <p>Buying frozen renal meals online is an easy way to get the proper nutrition for your condition. Try us out today!</p>
      <p>&nbsp;</p>
            </div></div>
      </div>
0
 
GaryCommented:
Dunno, let me know when the changes are online.
0
 
GaryCommented:
Set the header image width to 100%

Your body content should be like this

<div class="row clearfix">

	<div class="col-md-6 column">
		<div style="background-color:#c6c4c5;">
		Variety...
		</div>
	</div>
	<div class="col-md-6 column">
		<div style="background-color:#c6c4c5;">
		Information...
		</div>
	</div>
</div>
<div class="row clearfix">
	<div class="col-md-6 column">
		<div style="background-color:#c6c4c5;">
		Testimonials...
		</div>
	</div>
	<div class="col-md-6 column">
		<div style="background-color:#c6c4c5;">
		Order...
		</div>
	</div>
</div>

Open in new window

0
 
mel200Author Commented:
OK, I did that... but I want the whole body section to be colored, not small boxes like that.  The width all looks great now, though, thanks!
0
 
mel200Author Commented:
Thanks for your patience.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.