I created a responsive image grid and i'm trying to center the title

Code Feedback
1 

     <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, intial-scale=1">
  </head>
  <style>
  	.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%;
  }

  	
#title{
	float:right;
}




  </style>
div id="main">
  <h1 id="title"> Dr.Norman Borlaug</h1>
</div>

before i added the responsive grid i centered the title the usual way now that i have added a responsive image grid it doesn’t want to center how could I center it .

2

First, in the code you posted, you are missing the opening less-than bracket on the div#main:

div id="main"> should be <div id="main">

Second, there are a ton of ways to center the h1. The easiest would be to add text-align: center to it. But depending on what you ultimately do on the page you may have to use another method. This will give you some other ideas if you run into further problems: