Flexbox Test1

by Svitcher

HTML

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Flexbox: Task 1</title>


    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        nav ul {
          max-width: 700px;
          list-style:none;
          padding: 0;
          margin: 0;
        }

        nav a:link,
        nav a:visited {
          background-color: #4D7298;
          border: 2px solid #77A6B6;
          border-radius: .5em;
          color: #fff;
          padding: .5em;
          display: inline-block;
          text-decoration: none;
        }
    </style>



</head>

<body>

    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/products">Our Products</a></li>
        <li><a href="/contact">Contact Us</a></li>
      </ul>
    </nav>

</body>

</html>

CSS

nav ul {
   display: flex;
justify-content: space-around; 
}