Home>
<! DOCTYPE html>
  <html>
  <head>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <title>Marvel</title>
      <link rel = "stylesheet" href = "style1.css">
  </head>
  <body>
  <header>
        
        
        
        
      <ul>
          <li>Home</li>
          <li>List of works</li>
          <li>News</li>
          <li>Character</li>
          <li>Goods</li>
      </ul>
        
  </header>

  </body>
  </html>
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}
li {
  list-style: none;
}

/ * css code * /
header {
    text-align: center;
}
.head-menu li {
    display: inline;
}


I want to center the header image and the head-menu list, what should I do?
It will be placed in the center, but I want to place it properly in the center.
Also, how can I open the list with 5 items in a centered interval?

  • Answer # 1


    I will try to answer for the first time

    The centering was done from the beginning, but I don't understand the details of the questioner's image.
    Do you want to align the left side of the image with the left edge of the list?

    >>Also, how can I open the list with 5 items in a centered interval?

    .head-menu li {
        display: inline;
        margin: 0 20px;/* added * /
    }


    The image has 20px margins on the left and right of the list
    margin