my grids all screwed up and idk what went wrong

[eyntivemd]

hey im tryna like set up an interests page and i have this grid with some boxes in it with info but the main info box is for some reason stuck on the far right part of the page and no matter what i do it refuses to like move over so idk lol any ideas?

Code

<!DOCTYPE html>
<html>

  <style>
  
  img{
  border: grey outset;  
  background: rgba(161, 88, 77, 1);
  width: 20%
  }
  
  p1{
  color: black;  
  border: grey outset;
  background: rgba(161, 88, 77, 1);;
  justify-self: left;
  width: 20%
  }
  
  body{
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(funni.png);;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    }
  
    
  .interest1{
    background: rgba(245, 73, 39, 0.3);
    border: grey outset;
    display: grid;
    width: 70%;
    grid-template-rows: repeat(3);
    padding: 5px;
    }
    
  .text{
    grid-row-start: 1;
    grid-row-end: 4;
    border: grey outset;
    text-align: left;
    }
    
  .favch{
    grid-row: 2 / 3;
    }
  
  </style>

  <body>
  
  <center>

      
      <div class="interest1">
    
        <img src="viynl.png" class="favch">
        
        <div class="text">
        
          <p2> pony:3 </p2>
        
        </div>
      <p1>
        <div class="name">MLP</div>
      </p1>
      <p1>
        <div>fav ch: vinyl scratch</div>
      </p1>
      
      </div>
      
    
  </center>
  
  </body>
  
</html>

[MediocreMetastasis]

I fiddled with the css to make it work. I added grid-template-columns: 20% 1fr; which gives the profile 20% of the box and the main text box the rest of the area. I made the img and p1 elements have 100% width and gave the text class 50% (I think you can increase it to 100%)

Spoiler

Code

	  <style>
	  
	  img{
	  border: grey outset;  
	  background: rgba(161, 88, 77, 1);
	  width: 100%;
	  }
	  
	  p1{
	  color: black;  
	  border: grey outset;
	  background: rgba(161, 88, 77, 1);;
          width: 100%;
	  }
	  
	  body{
	    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(funni.png);;
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-attachment: fixed;
	    }
	  
	    
	  .interest1{
	    background: rgba(245, 73, 39, 0.3);
	    border: grey outset;
	    display: grid;
	    width: 70%;
	    grid-template-rows: repeat(3);
            grid-template-columns: 20% 1fr;
	    padding: 5px;
            justify-content: center;
	    }
	    
	  .text{
	    grid-row: 1 / span 3;
            grid-column: 2;
	    border: grey outset;
	    text-align: left;
            width: 50%;
            justify-self: center;
	    }
	    
	  .favch{
	    grid-row: 2 / span 1;
	    }
	  
	  </style>

[close]

[eyntivemd]

I fiddled with the css to make it work. I added grid-template-columns: 20% 1fr; which gives the profile 20% of the box and the main text box the rest of the area. I made the img and p1 elements have 100% width and gave the text class 50% (I think you can increase it to 100%)

Spoiler

Code

	  <style>
	  
	  img{
	  border: grey outset;  
	  background: rgba(161, 88, 77, 1);
	  width: 100%;
	  }
	  
	  p1{
	  color: black;  
	  border: grey outset;
	  background: rgba(161, 88, 77, 1);;
          width: 100%;
	  }
	  
	  body{
	    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(funni.png);;
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-attachment: fixed;
	    }
	  
	    
	  .interest1{
	    background: rgba(245, 73, 39, 0.3);
	    border: grey outset;
	    display: grid;
	    width: 70%;
	    grid-template-rows: repeat(3);
            grid-template-columns: 20% 1fr;
	    padding: 5px;
            justify-content: center;
	    }
	    
	  .text{
	    grid-row: 1 / span 3;
            grid-column: 2;
	    border: grey outset;
	    text-align: left;
            width: 50%;
            justify-self: center;
	    }
	    
	  .favch{
	    grid-row: 2 / span 1;
	    }
	  
	  </style>

[close]

yes dude this is amazing thanks alot
and awsome signature too