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.
.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>
2
Answers
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!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