I have noticed that when I change screen resolution it makes my template too wide and it doesn't look good. I have seen many websites that maintain their width regardless of the screen resolution. How do I set min-width and max-width?

#centre {
border:1px solid #202020;
border-bottom:0;
border-top:0;
color:#000;
padding:1.5em;
}
#conteneur {
background-color:#fafafa;
display: block;
margin-left: 20px;
margin-right: 20px;
}
#haut {
background-color:#202020;
height:1.8em;
max-height:1.8em;
}
#header {
background:url(header/09215.jpg) no-repeat top center;
border:1px solid #fafafa;
color:#000;
font-size:2em;
height:2.5em;
padding-left:2em;
padding-top:2em;
}
#pied {
border:1px solid #202020;
border-top:0;
padding:0.5em;
height:5em;
text-align:right;
}
.menuhaut {
font-size:10px;
list-style-type:none;
margin:0;
padding:0;
}
.menuhaut a {
color:#fafafa;
margin:0 0.4em;
text-decoration:none;
}
.menuhaut a:hover {
color:#FF0;
text-decoration:none;
}
.menuhaut li {
border-right:1px solid #fff;
display:inline;
float:left;
margin:0;
padding:0.6em 1px;
}
a {
color:#7FDD48;
text-decoration:underline;
}
body {
background-color:#CDCDCD;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
margin:0px auto; padding:10px;
}
h1 {
font-size:1.6em;
margin:0.5em 0.5em 1em 0;
}
h2 {
font-size:1.2em;
margin:0.8em 0.5em 0.3em 0.6em;
}
h3 {
font-size:1.1em;
margin:0.8em 0.5em 0.3em 0.8em;
}
h4 {
font-size:1em;
margin:0.7em 0.5em 0.3em 1em;
}
h5 {
font-size:0.9em;
margin:0.6em 0.5em 0.2em 1.5em;
}
p {
margin:1px 0.5em 0.5em 1.5em;
}
body {
background-color:#CDCDCD;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
margin:0px auto; padding:10px;
}
body {
background-color:#CDCDCD;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:15px;
min-width: 1020px;
max-width: 1020px;
margin:0px auto; padding:10px;
}