a:link, a:active, a:visited { color: yellow; background-color: transparent; text-decoration: none; } a:hover { color: white; background-color: transparent; text-decoration: none; } body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .nav { position: fixed; top: 10px; width: 100%; background-color: #333; display: flex; justify-content: center; padding: 10px 0; z-index: 100; } .menu { display: flex; justify-content: right; /* play here*/ background-color: #333; padding : 10px; /*padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px;*/ width: 100%; position: fixed; z-index: 100; } .menu a { color: white; padding: 14px 20px; text-decoration: none; text-align: right; /* does nowt methinx */ } .menu a:hover { /*background-color: #ddd; color: black;*/ color : yellow; } .menu .icon { display: none; } @media screen and (max-width: 600px) { .menu a { display: none; } .menu a.icon { display: block; } .menu.responsive { flex-direction: column; align-items: flex-start; } .menu.responsive a { display: block; /*text-align: right; play here*/ width: 94%; padding: 10px; } } /*https://www.w3schools.com/css/css_rwd_images.asp*/ img { max-width: 100%; height: auto; } .section { width: 100%; /*height: 100vh;*/ /* Full viewport height */ color: white; font-size: 15px; display: flex; justify-content: center; align-items: flex-start; /* Align text to the top */ text-align: center; padding-left:0px; padding-right:0px; padding-top: 170px; padding-bottom: 100px; /* Adds space to avoid being hidden behind fixed nav */ /*clip-path: ellipse(100% 25% at bottom);*/ background: url('data:image/svg+xml,') no-repeat center bottom; } .one { background-color: #EF5354; } .two { background-color: #E03B8B; } .three { background-color: #3944F7; } .four { background-color: #38CC77; } .five { background-color: #38CC99; } .innerDiv { width:70%; text-align:left; border-radius: 25px 25px 25px 25px; background: #333; padding: 50px; } .Jen { width:50%; text-align:left; border-radius: 8px; background: yellow; color: #333; padding: 10px; } .container { display: flex; align-items: center; /* Centers items vertically */ gap: 50px; /* Adds spacing between text and image */ } .image img { width:800px; max-width: 100%; /* Makes sure the image scales */ height: auto; } @media (max-width: 600px) { .container { flex-direction: column; /* Stacks items vertically on mobile */ align-items: center; /* Centers items */ } }