Why I can't center the images?

<div class="activities">
            <h3>Top three activities to do at Torshov</h3>
            <img class="activities-img" src="images/deniz.jpg">
            <img class="activities-img" src="images/muze.jpg">
            <img class="activities-img" src="images/bar.jpg"> 
        </div>

body {
    margin: 0;
}

.activities-img {
    width: 100%;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;  
    justify-content: center;
}

I want to center the images, I have tried with "justify content", "text-align" and all but didn't work, could you help me? Thanks.

There are several ways to do this. It depends on whether you should do it with flexbox or without flexbox. Also, it depends on whether the html can be changed or should not be changed.

With flexbox, changes in your html:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.activities-img {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.activities-img img{
  width: 100px;
  height: 100px;
}

<!-- language: lang-html -->

<div class="activities">
  <h3>
    Top three activities to do at Torshov
  </h3>
  <div class="activities-img">
    <img src="images/deniz.jpg">
    <img src="images/muze.jpg">
    <img src="images/bar.jpg"> 
  </div>
</div>

<!-- end snippet -->

Without flexbox, but the same html

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.activities-img {
    display: block;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}

<!-- language: lang-html -->

<div class="activities">
    <h3>Top three activities to do at Torshov</h3>
    <img class="activities-img" src="images/deniz.jpg">
    <img class="activities-img" src="images/muze.jpg">
    <img class="activities-img" src="images/bar.jpg"> 
</div>

<!-- end snippet -->

You could need "text-align" to center de content of the h3 tag

Wrap the images in a container with the display property set to flex. Then you can use the justify-content property.

<div class="activities">
  <h3>Top three activities to do at Torshov</h3>
  <div id="flex">
    <img class="activities-img" src="images/deniz.jpg">
    <img class="activities-img" src="images/muze.jpg">
    <img class="activities-img" src="images/bar.jpg"> 
  </div>
</div>

body {
    margin: 0;
}

div#flex {
  display: flex;
  justify-content: center;
}

.activities-img {
    width: 100%;
    width: 100px;
    height: 100px;
}

I think you forgot centering content in parent div .activities

body {
    margin: 0;
}

.activities {
  width: 100%;
  background-color: lightpink;
  text-align: center;
}
.activities-img {
    width: 100%;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;  
    justify-content: center;
}