Rows not aligned correctly in Bootstrap - css

Question

I've been searching for hours for the solution but didn't find.
Here is my HTML and CSS. I don't understand why the image 'THE_IMAGE.png' is not correctly aligned with the div above it ?
Can someone help me ?
Thank you !
body p {
font-size: 1.2em;
}
body a:visited{
color: white;
}
.page-header {
text-align: center;
}
/* Actus */
#actus {
margin-bottom: 5em;
}
.section_title h1{
text-align: center;
}
.button_all_actus {
background-color: #38C8D6;
border-color: 1px solid white;
height: 90px;
display: table;
color: white;
table-layout: fixed;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
}
.button_all_actus p {
display:table-cell;
vertical-align:middle;
font-weight: bold;
}
.button_actus_size_2 {
background-color: #38C8D6;
height: 50px;
display: table;
table-layout: fixed;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
color: white;
}
.button_actus_size_2 p {
display:table-cell;
vertical-align:middle;
font-weight: bold;
}
.button_actus_size_3 {
background-color: #38C8D6;
height: 50px;
display: table;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
color: white;
}
.button_actus_size_3 p {
display:table-cell;
vertical-align:middle;
font-weight: bold;
}
.text_loin {
margin-top: 180px;
}
.plus_loin {
margin-top: 3em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id ="actus">
<div class="container">
<div class="row">
<div class="section_title">
<h1>LOREM</h1>
<hr class="divider_blue">
</div>
</div>
<div class="row all_actus">
<div class="col-md-4">
<h2>LOREM</h2>
</div>
<a href="#">
<div class="col-md-8 button_all_actus">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 col-md-offset-4 button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 col-md-offset button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 col-md-offset-4 button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-8 col-md-offset-4 button_actus_size_3">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
</div>
</div>
</section>
<section id="temoignages">
<div class="container">
<div class="row">
<div class="section_title">
<h1>Lorem</h1>
<hr class="divider_blue">
</div>
</div>
<div class="row">
<div class="col-md-7">
<p>Lorem ipsum</p>
</div>
<div class="col-md-3 col-md-offset-2">
<img src="<?php bloginfo('template_directory'); ?>/images/THE_IMAGE.png">
</div>
</div>
</div>
</section>
<?php get_footer(); ?>

Answer 1

as you can see, the image have padding-left: 15px and padding-right: 15px which is from bootstrap.css here:
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
just using padding-right: 0; is not enough, you need to use padding-right: 0 !important; to force it.
easy way to test is to add background-color to the images parent.
Or you can add * { border: 1px solid red; } to your css to quickly check block size of all element.
body p {
font-size: 1.2em;
}
body a:visited{
color: white;
}
.divider_blue {
border-top: 5px solid #0BB0DE;
width: 30px;
border-radius: 40px;
}
.page-header {
text-align: center;
}
/* Actus */
#actus {
margin-bottom: 5em;
}
.section_title h1{
text-align: center;
}
.button_all_actus {
background-color: #38C8D6;
border-color: 1px solid white;
height: 90px;
display: table;
color: white;
table-layout: fixed;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
}
.button_all_actus p {
display:table-cell;
vertical-align:middle;
font-weight: bold;
}
.button_actus_size_2 {
background-color: #38C8D6;
height: 50px;
display: table;
table-layout: fixed;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
color: white;
}
.button_actus_size_2 p {
display:table-cell;
vertical-align:middle;
font-weight: bold;
}
.button_actus_size_3 {
background-color: #38C8D6;
height: 50px;
display: table;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
color: white;
}
.button_actus_size_3 p {
display:table-cell;
vertical-align:middle;
font-weight: bold;
}
.text_loin {
margin-top: 180px;
}
.plus_loin {
margin-top: 3em;
}
.alignright {
text-align: right;
padding-right: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id ="actus">
<div class="container">
<div class="row">
<div class="section_title">
<h1>Actus</h1>
<hr class="divider_blue">
</div>
</div>
<div class="row all_actus">
<div class="col-md-4">
<h2>LOREM</h2>
</div>
<a href="#">
<div class="col-md-8 button_all_actus">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 col-md-offset-4 button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 col-md-offset button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 col-md-offset-4 button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-8 col-md-offset-4 button_actus_size_3">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
</div>
</div>
</section>
<section id="temoignages">
<div class="container">
<div class="row">
<div class="section_title">
<h1>Lorem</h1>
<hr class="divider_blue">
</div>
</div>
<div class="row">
<div class="col-md-7">
<p>Lorem ipsum</p>
</div>
<div class="col-md-3 col-md-offset-2 alignright">
<img src="https://dummyimage.com/242x242/000/fff">
</div>
</div>
</div>
</section>

Answer 2

put class="img-responsive" so it will fit the size of your parent div.
Explaination
img-responsive is a bootstrap classname that will automatically fit your image 100% width to your parent div. Example, if your parent div is 100px and the with of image is 500px, then your 500px image width will become same as 100px which is the width of the parent div (without resizing the document).
More explainations here:
https://v4-alpha.getbootstrap.com/content/images/
I tried it on my PC and it's working.. See code below.
<section id="temoignages">
<div class="container">
<div class="row">
<div class="section_title">
<h1>Lorem</h1>
<hr class="divider_blue">
</div>
</div>
<div class="row">
<div class="col-md-7">
<p>Lorem ipsum</p>
</div>
<div class="col-md-3 col-md-offset-2">
<img src="<?php bloginfo('template_directory'); ?>/images/THE_IMAGE.png" class="img-responsive">
</div>
</div>
</div>
</section>
body p {
font-size: 1.2em;
}
body a:visited{
color: white;
}
.divider_blue {
border-top: 5px solid #0BB0DE;
width: 30px;
border-radius: 40px;
}
.page-header {
text-align: center;
}
/* Actus */
#actus {
margin-bottom: 5em;
}
.section_title h1{
text-align: center;
}
.button_all_actus {
background-color: #38C8D6;
border-color: 1px solid white;
height: 90px;
display: table;
color: white;
table-layout: fixed;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
}
.button_all_actus p {
display:table-cell;
vertical-align:middle;
font-weight: bold;
}
.button_actus_size_2 {
background-color: #38C8D6;
height: 50px;
display: table;
table-layout: fixed;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
color: white;
}
.button_actus_size_2 p {
display:table-cell;
vertical-align:middle;
font-weight: bold;
}
.button_actus_size_3 {
background-color: #38C8D6;
height: 50px;
display: table;
border-style: solid;
border-width: 1px;
border-color: #FFFFFF;
color: white;
}
.button_actus_size_3 p {
display:table-cell;
vertical-align:middle;
font-weight: bold;
}
.text_loin {
margin-top: 180px;
}
.plus_loin {
margin-top: 3em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section id ="actus">
<div class="container">
<div class="row">
<div class="section_title">
<h1>Actus</h1>
<hr class="divider_blue">
</div>
</div>
<div class="row all_actus">
<div class="col-md-4">
<h2>LOREM</h2>
</div>
<a href="#">
<div class="col-md-8 button_all_actus">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 col-md-offset-4 button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 col-md-offset button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 col-md-offset-4 button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-4 button_actus_size_2">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
<a href="#">
<div class="col-md-8 col-md-offset-4 button_actus_size_3">
<p class="text-left">LOREM</p>
<p class="text-right"> → </p>
</div>
</a>
</div>
</div>
</section>
<section id="temoignages">
<div class="container">
<div class="row">
<div class="section_title">
<h1>Lorem</h1>
<hr class="divider_blue">
</div>
</div>
<div class="row">
<div class="col-md-7">
<p>Lorem ipsum</p>
</div>
<div class="col-md-3 col-md-offset-2">
<img src="http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg" class="img-responsive">
</div>
</div>
</div>
</section>