skip to Main Content

I am making a basic website and having a problem with aligning rows with columns. I have a few rows and it seems like because of the gutters they are pushed to one side. How can I make it so that the body is lined up together? i’ve attached code and a picture to show what’s happening.enter image description here

    .nav3{

	

	ul{
		
			background-color:orange;
			overflow:auto;

			.red{
				color:$red;
			}

			.blue{
				color:$blue;
			}

			.green{
				color:$green;
			}

			.pink{
				color:$pink;
			}
		


			li{
				font-size: 1.4em;
				float:left;
				list-style-type: none;

				


			}

			li:last-child{
				border:0px;
			}

			p{
				margin:0;
			}
		
	}
}

    footer{
    
    	[class*="zocial-"]{
    		color:orange;
    		font-size:2em;
    	}
    
      background-color: $greyHeader;



  

    .list1{
      	list-style-type: none;
      	li{
      		float:left;
      	}
    
    
      }
    
      .list2{
      	list-style-type: none;
      	li{
      		float:left;
      	}
      }
    
      .list3{
      	list-style-type: none;
      }
    }

    .row1Pics{

	height:300px;

	p{
		font-size:1.5em;
		color:white;
		padding:1em;
	}

	.grey{
		background-color:grey;
		max-width:100%;
		
	}

	button{
	padding:1.1em;
	border: 3px solid green;
	background-color:white;
	font-size:1.4em;
	margin-bottom:1.2em;

	}
    }


    .row2Pics{
    	.col-md-4{
    		background-color:grey;
    	}
	
	

	button{
		padding:1.1em;
		border:3px solid blue;
		background-color:white;
		font-size:1.4em;
		margin-bottom:1.2em;
	}

	p{
		color:white;
		font-size:1.4em;
		padding:1em;
	}

    }
    <link  rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <div class="row nav2">
	<div class="col-md-12">
		<p class=" heading text-right">
			Need help? Call our 24 hr hotline
		</p>
		<p class="text-right number">
			328-0922
		</p>
	</div>
</div>


    <div class="row nav3">
    	<ul>
    		<li class="col-md-3 red text-center">I need <br> Help</li>
    		<li class="col-md-3 blue text-center">I need <br> Information</li>
    		<li class="col-md-3 green text-center">I want <br> to donate</li>
    		<li class="col-md-3 pink text-center">I want <br> to volunteer</li>
    	</ul>
    
    </div>

    <!-- Carousel Start -->
    
    <div ng-controller="carouselController">
      <div style="height: 405px">
        <uib-carousel interval="myInterval" no-wrap="noWrapSlides">
          <uib-slide ng-repeat="slide in slides" active="slide.active" index="slide.id">
            <img ng-src="{{slide.image}}" style="margin:auto;">
            <div class="carousel-caption">
              <h4>Slide {{slide.id}}</h4>
              <p>{{slide.text}}</p>
            </div>
          </uib-slide>
        </uib-carousel>
      </div>
    </div>
    
    <!-- Carousel End -->




    <div class="row row1Pics ">
    
    	<div class="col-md-8">
    		<img class="img-responsive" src="http://lorempixel.com/780/300/sports">
    	</div>
    	<div class="col-md-4 grey">
    		<p class="text-center">
    			In order to offer help, we need your help. Consider becoming a partner
    			with us against Violence in the Bahamas.
    		</p>
    		<button class="text-uppercase center-block">Donate Today</button>
    	</div>
    
    </div>

    <div class="row row2Pics">
    
    	<div class="col-md-4">
    		<p class="text-center">
    			Knowledge is power. Get information about Domestic Violence and abuse
    			to how you can help youself or someone else.
    		</p>
    		<button class="text-uppercase center-block">Go To Resources</button>
    	</div>
	<div class="col-md-8">
		<img class="img-responsive" src="http://lorempixel.com/780/300/business">
	</div>

</div>

    <footer class="row">
    	<ul class="col-md-4 list1">
    		<li class="col-md-4">Donate</li>
    		<li class="col-md-4">Volunteer</li>
    		<li class="col-md-4">Contact Us</li>
    	</ul>
    
    	<ul class="col-md-5 list2">
    		<li class="col-md-3 zocial-twitter"></li>
    		<li class="col-md-3 zocial-pinterest"></li>
    		<li class="col-md-3 zocial-youtube"></li>
    		<li class="col-md-3 zocial-instagram"></li>
    	</ul>
    
    	<ul class="col-md-3 list3">
    		<li>Bahamas Crisis Center</li>
    		<li> P.O Box 44370</li>
    		<li>Nassau, Bahamas</li>
    	</ul>
    </footer>

http://codepen.io/mroker/pen/bpeQWv?editors=1100

2

Answers


  1. So you are using Bootstrap, I assume that fact.
    To align all of your elements, always place it inside the col-md-with the number of column you want, remember to fill all the 12 columns so it would be aligned automatically.

    I saw you are missing the col-md- for your carousel. Put it and check again!

    Login or Signup to reply.
  2. Your columns are actually lined up, the reason they “look” unaligned is because as standard Bootstrap columns come with a left & right padding of 15px.

    Which means when you apply background-color: grey onto a column it ignores the padding.

    I made a little example for you here:
    Bootstrap Columns padding example

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search