[Solved]: Cant center image in my first project

1

Hi,

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

HTML:

  <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>
      </div>
      <h3 class="text-center"><u>
        His Timeline:</u>
        </h3>
        <div class="row">
          <div class="col-lg-4">
          </div>
          <div class="col-lg-8">
      <ul>
        <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>
      </ul>
            <p>"One fine man"</p>
            <cite>- The Queen</cite
              <br>
              <br>
              <p>Find out <a href="https://en.wikipedia.org/wiki/Programmer" target="_blank">more.</a></p>
          </div>
        </div>
          <hr>
    <div class="footer">
      <p class="text-center">&copy; Stefan Berger</p>
    </div>
    </div>
  </div>
</body>

css:

  background-color: grey;
  margin: 50px;
}

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

.subheading {
  font-style: italic;
}

.footer {
  
}

img {
  width:100%;
  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;
}

Greetings,
Robox

2

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 {
  width:97%;
  margin: auto;
}

If you haven’t tried that yet.

Good Luck.

3

Thanks,

I will try that later.

4

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

5

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