Reputation: 115

Why does adding border-radius pushes the picture to the left?

body {
      background-color:olive;
      margin:0;
    }

    nav {
      background-color:aqua;
    }
    #container{
      max-height:1800px;
      display:flex;
      flex-direction:column;
    }

    #container > a {
      
      background-color:chocolate;
      padding:7px;
      border-radius:10px; 
    }

    #container > a:hover{
      opacity:0.5;
    }

    #item-2, #item-3, #item-1, #item-5 {
     align-self:flex-start;
     margin-top:5px;
    }


    #item-4{
     order:-1;
     align-self:flex-end;

    }
    /* nav is finally done after 1.5 hours lol */

    #bear-nest {
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      align-items:center;
    }

    img {
      border-radius:10%;
      align-self:center;  
    }


    #bear-nest > p {
      margin-bottom:auto;
    }

    hr {
      border: 1px solid black;
    }

<body>
<nav>
  <div id="main-content">
  <div id="container" >
  
    <a id="item-1" class="bonus" href="#">Information</a>
    <a id="item-2" class="bonus" href="#">Contacts</a>
    <a id="item-3" class="bonus" href="#">Media</a>
    <a id="item-4" href="#">Log out</a>
    
</div>
  </div>
</nav>
  <div id="american-bear-nest">
    <p>The American black bear</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
    <div id="bear"><p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.

    It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p><hr></div>


  <div>

  
</body>

Hello, I'm trying to build my first website but now I've got a problem. I tried to add border-radius to img but as soon as I add , it pushes the whole image to the left side? Could someone explain me why does this happen? Because I would really like to make it border-radius:50% without getting it pushed to the left side? Thanks.

Upvotes: 0

Answers (3)

לבני מלכה

Reputation: 16251

You set id="american-bear-nest" no id="bear-nest" to div

So change #bear-nest to #american-bear-nest in css

body {
      background-color:olive;
      margin:0;
    }

    nav {
      background-color:aqua;
    }
    #container{
      max-height:1800px;
      display:flex;
      flex-direction:column;
    }

    #container > a {
      
      background-color:chocolate;
      padding:7px;
      border-radius:10px; 
    }

    #container > a:hover{
      opacity:0.5;
    }

    #item-2, #item-3, #item-1, #item-5 {
     align-self:flex-start;
     margin-top:5px;
    }


    #item-4{
     order:-1;
     align-self:flex-end;

    }
    /* nav is finally done after 1.5 hours lol */

    #american-bear-nest {
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      align-items:center;
    }

    img {
      border-radius:10%;
    }


    #american-bear-nest > p {
      margin-bottom:auto;
    }

    hr {
      border: 1px solid black;
    }

<body>
<nav>
  <div id="main-content">
  <div id="container" >
  
    <a id="item-1" class="bonus" href="#">Information</a>
    <a id="item-2" class="bonus" href="#">Contacts</a>
    <a id="item-3" class="bonus" href="#">Media</a>
    <a id="item-4" href="#">Log out</a>
    
</div>
  </div>
</nav>
  <div id="american-bear-nest">
    <p>The American black bear</p>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/01_Schwarzb%C3%A4r.jpg/220px-01_Schwarzb%C3%A4r.jpg" alt="bear" title="The American black bear">
    <div id="bear"><p>The American black bear (Ursus americanus) is a medium-sized bear native to North America. It is the continent's smallest and most widely distributed bear species. Black bears are omnivores, with their diets varying greatly depending on season and location. They typically live in largely forested areas, but do leave forests in search of food. Sometimes they become attracted to human communities because of the immediate availability of food. The American black bear is the world's most common bear species.

    It is listed by the International Union for Conservation of Nature (IUCN) as a least-concern species, due to its widespread distribution and a large population estimated to be twice that of all other bear species combined. Along with the brown bear, it is one of only two of the eight modern bear species not considered globally threatened with extinction by the IUCN. American black bears often mark trees using their teeth and claws as a form of communication with other bears, a behavior common to many species of bears.</p><hr></div>


  <div>

  
</body>

Upvotes: 1

Ravi Chand Dudala

Reputation: 48

That's because you gave the wrong id in your styling. In html code you gave the element as id="american-bear-nest" but in css styling it is given as #bear-nest instead of "#american-bear-nest".

Upvotes: 0

Vishal

Reputation: 11

border-radius has nothing to do with image being centered or left.

To center the image use:

display: block;
margin-left: auto;
margin-right: auto;

instead of align-self:center;

Upvotes: 1

Why does adding border-radius pushes the picture to the left?

Answers (3)

Related Questions