header { background: url('https://www.thoughtco.com/thmb/3NKfAc1GQJYM6CjMyvlZED3VE10=/1500x1125/filters:fill(auto,1)/3-D_DNA-56a09ae45f9b58eba4b20266.jpg') no-repeat fixed center / cover; padding: 30px; } nav ul { list-style: none; font-size: 0; } nav li { margin-bottom: 0; display: inline-block; width: 50%; } nav a { position: relative; width: 100%; height: 20px; padding: 7px; line_height: 20px; } nav li:nth-child(2n+1) a:after { position: absolute; content: ''; top: 19.5px; right: -2.5px; z-index: 10; border-radius: 100%; background: steelblue; width: 5px; height: 5px; } body { font-family: system-ui; background: black; color: white; text-align: center; } .summary { background: #3c153b; padding: 10px; } /* OUr members */ /* Three columns side by side */ .column { float: left; width: 33.3%; margin-bottom: 16px; padding: 0 8px; } /* Display the columns below each other instead of side by side on small screens */ @media screen and (max-width: 650px) { .column { width: 100%; display: block; } } /* Add some shadows to create a card effect */ .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } /* Some left and right padding inside the container */ .container { padding: 0 16px; } /* Clear floats */ .container::after, .row::after { content: ""; clear: both; display: table; } .title { color: grey; } .button { border: none; outline: 0; display: inline-block; padding: 8px; color: white; background-color: #000; text-align: center; cursor: pointer; width: 100%; } .button:hover { background-color: #555; }