I need help with my css and HTML code (specifically the nav so that it is right aligned and doesnt have any decorations and fieldset dont have borders

HTML code:

<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css">

	<header id="top-bar">
	<nav id="nav">
          <li><a href="#projects">Projects</a></li>
          <li><a href="#about-me">About</a></li>
          <li><a href="#contact">Contact</a></li>
	<main class="main">
		<fieldset class="fieldset">
			<h2 id="projects">PROJECTS</h2>
<!-- Let's normalise real sex -->
			<div id="porn-industry" class="porn-industry">
			<img href="" ><a href=""></a>
<!-- A letter from the future -->
			<div id="speculative-design" class="speculative-design">
		<fieldset class="fieldset">
			<h2 id="about-me"> ABOUT ME </h2>
			<img src="">
			<p id="about-me">Hello! I am a wine loving, enthusiastic and lively second-year Graphic Design student at Arts University Bournemouth with a passion for visual communication and a drive for creative problem-solving. 
I enjoy group activities and value social interaction, originality and focus on hidden meanings and distant possibilities.
I am always eager to improve my current graphic design skills and learn new technologies and trends in design that focus on creating compelling and thought-provoking designs that help brands stand out and improve the audience's experience, as I like finding solutions to important social issues through the process of identifying the context and needs of the people in order to create a more sustainable, ethical and multicultural environment. 
Although I should be busy enough with an ongoing degree, I always feel the need to keep myself busy with more projects! Some at the moment include being a Student Ambassador at AUB, Head Editor of BUMF magazine, and my first comic series ‘How to: Devil’.
Being involved with the community is important to me which is why I am currently working with
	<!-- contact me -->
    	<fieldset class="fieldset">
			<h2 id="contact">CONTACT</h2>
			<div class="Email">
			<p> Email: karlanoren@gmail.com



CSS code:

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;

body {
  background: #0A0A0A;
  color: #dfdfe2;
  font-family: Helvetica;
  margin: 0;

header {
  width: 100%;
  height: 50px;
  background-color: #0A0A0A;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;

nav {
  width: 50%;
  max-width: 300px;
  height: 50px;

nav > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;

nav > ul > li:hover {
  background-color: #dfdfe2;
  color: #1b1b32;
  cursor: pointer;
  text-decoration: none;


li > a {
  color: inherit;
  text-decoration: none;

.fieldset {
	border: none;

.main {
  padding-top: 50px;
  background-color: #0A0A0A;

h1 {
font-family: montsereatt;
font-size: 28px;
color: #dfdfe2;

p {
color: #fcf2d8;


h2 {
font-family: Anton;
margin-top: 0px;
  padding-top: 60px;

I still want the links to my nav to be linked to the fieldsets, but want them to flow a bit smoother, I had it before but I’ve screwed it up lol.
I don’t see what I have done wrong, so some help will be greatly appreciated!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.