[Solved]: Cant center image in my first project



Yesterday I created my first project. Everything looks more or less alright on my small 13" screen. On my 24" screen at home the main image is not in the center. I tried a few things and googled a little, but I still cant find the solution.

Here is the website in codepen: https://codepen.io/Robox/pen/Kvmogp


  <div class="body">
    <div class="main-section">
      <h1 class="text-center">Mr. Stefan Berger</h1>
      <h4 class="subheading text-center">His way to being a programmer</h4>
      <div id="big-image-div"><img src="https://www.exceptionnotfound.net/content/images/2015/04/the-coder.jpg" class="img-responsive center-block">
        <h5 id="img-subheading" class="text-center">This is Mr. Stefan Berger in his young age</h5>
      <h3 class="text-center"><u>
        His Timeline:</u>
        <div class="row">
          <div class="col-lg-4">
          <div class="col-lg-8">
        <li>1995: Date of birth</li>
        <li>2001: First day of Primary School</li>
        <li>2014: Last day of School and first day of university</li>
        <li>2017: Finished bachelor in economics and started to learn to code</li>
            <p>"One fine man"</p>
            <cite>- The Queen</cite
              <p>Find out <a href="https://en.wikipedia.org/wiki/Programmer" target="_blank">more.</a></p>
    <div class="footer">
      <p class="text-center">&copy; Stefan Berger</p>


  background-color: grey;
  margin: 50px;

.main-section {
  background-color: lightgrey;
  border-radius: 20px;

.subheading {
  font-style: italic;

.footer {

img {
  border-radius: 10px;

#big-image-div {
  background-color: white;
  padding: 10px 10px 10px 10px;
  margin:  20px 20px 20px 20px;
  border-radius: 10px;

#img-subheading {
  padding-top: 10px;
  padding-bottom: 10px;
  font-style: italic;



I can’t replicate the problem. My laptop shows the image centered, hooking up a larger monitor shows the same(they aren’t particularly high res screens though).

are you using the same browser on both screens?
If the problems persist, you might try setting your #big-image-div to have

#big-image-div {
  margin: auto;

If you haven’t tried that yet.

Good Luck.



I will try that later.


Or you can also set text-align: center; to the parent container of the images.


Somehow the problem solved itself, weird. Thanks a lot anyways.