Tribute page trouble withcss grid layout


img.align-left{

	float: left;
	margin-left: 20px;
}
img.medium{
	float: left;
	margin-left: 515px;
}

img.large{
	float: left;
	margin-left: 515px;
}
img.painting-centerlarge{
	float: left;
	margin-left: 515px;

}
em.quote{

	margin-left: 550px;

}

p.link{
	margin-left: 600px;
}










  
  	


.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;

}
.row{
	display: flex;
	flex-wrap: wrap;
	flex-direction: flex-end;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}




#main{
	display: grid;
	align-items: center;
	justify-content: center;
	border-color: #ed6a5aff;
	border-style: solid;
	border-width: thin;
	background-color: #ed6a5aff;

}


  
}


body{

	display: grid;
	align-items: right;
	justify-content: right;
	text-align: right;
	

	
}
p.info{
	text-align: center;
	
	
	

	}



	
   
 


    
	



  </style>



<head>

<div id="main">
  <h1 id="title" > Dr. Norman Borlaug</h1>
</div>
<div id="img-div">
<div class="row">
<div class="column">
  <img src="img/normanwithpeople.png" alt="Norman Borlaug having a conversion with colleuges">
  <img src="img/norman-borlaug.png" alt="Norman Borlaug in a field smiling" id ="image">
  <p id="img-caption"></p>
    </div>
</div>
</div>

  <div class="column">
<img src="img/normanatconference.png" alt="Norman Borlaug at a confrence">
     <img src="img/normanwithjimmy.png" alt="Norman_Borlaug with  former President Jimmy Carter">
</div>
  
  <div class="column">

    <img src="img/norman.png" alt="Norman Borlaug and his wife">
    <img src="img/normangetsaward.png" alt="Norman Borlaug receives an award from president George W Bush">
  </div>


    
     <div class="column">
     	<div class="image">
      <img src="img/normanwithgranddaughter.png" alt="Norman Borlaug with his granddaughter who is carrying his great grandchild">
      <img src="img/normaninmexico.jpg"  alt=" A painting of Norman Borlaug in a field in Mexico">
      <img src="img/autographedphoto.png" alt="An autographedphoto of Norman Borlaug">
      <img src="img/normaninghana.png" alt=" Norman Borlaug in ghana with a group of people">
      <img src="img/normannobel.png" alt="Norman Borlaug with his wife while holding the Nobel Peace Prize">
      <img src="">
  </div>
</div>


  
  <div class="column">
  	<img src="img/normanroomfullofreporters.png" alt="Norman Borlaug surronded by reporters " class="align- small">
  	<img src="img/Borlaugpaintinglarge.png" alt="Lagre painting of Norman Borlaug" class="painting-center large">
  	

  	<img src="img/normanstatue.png" alt="Norman Borlaug statue"  	class="align-center medium">

  	<img src="img/normanwithgranddaughter.jpg " alt="Norman Borlaug with granddaughter" class="align-right large">
  	<img src="img/normaninagroup.png" alt=" Norman Borlaug with a group of people  in a field"
  	class="align-right medium">
  	<img src="img/normanatscience.png" alt=" Norman Borlaug at a confrence at agricultural of science">

 
  </div>
</div>
</head>
  <img src="img/oldnorman.png" alt="A photo of Norman Borlaug">

  	

    
   <p class="important">

    <em class="quote">Fathered a revolution that saved billons of lives</em>
    
  </p>

 
<body>
    
 <div id="tribute-info">
   <p class="info">Norman Ernest Borlaug ( March 25, 1914 – September 12, 2009) was an American agronomist who led initiatives worldwide that contributed to the extensive increases in agricultural production termed the Green Revolution. Borlaug was awarded multiple honors for his work, including the Nobel Peace Prize, the Presidential Medal of Freedom and the Congressional Gold Medal.

Borlaug received his B.S. in forestry in 1937 and Ph.D. in plant pathology and genetics from the University of Minnesota in 1942. He took up an agricultural research position with CIMMYT in Mexico, where he developed semi-dwarf, high-yield, disease-resistant wheat varieties. During the mid-20th century, Borlaug led the introduction of these high-yielding varieties combined with modern agricultural production techniques to Mexico, Pakistan, and India. As a result, Mexico became a net exporter of wheat by 1963. Between 1965 and 1970, wheat yields nearly doubled in Pakistan and India, greatly improving the food security in those nations.

Borlaug was often called "the father of the Green Revolution", and is credited with saving over a billion people worldwide from starvation. According to Jan Douglas, executive assistant to the president of the World Food Prize Foundation, the source of this number is Gregg Easterbrook's 1997 article "Forgotten Benefactor of Humanity." The article states that the "form of agriculture that Borlaug preaches may have prevented a billion deaths." He was awarded the Nobel Peace Prize in 1970 in recognition of his contributions to world peace through increasing food supply.</p>
  </div>


  <a href  ="https://en.wikipedia.org/wiki/Norman_Borlaug"  target="_blank" id="tribute-link" > <p class="link"> Learn More About Norman Borlaug<p>

    </html>

</body>



My layout is this but i ran into a roadblock how do i cover that white space i tried to put an image in place it just goes below in I know it’s own column and i used the float center it but is there way i can keep those photos in the center and cover that white space with images.

Hi @_manual :slight_smile:

You’re using flex and grid layout which I believe is too much for this project. How about writing this more simply? :slight_smile: