cant center my social media icons with my nav bar links :(-CodePudding

I am new to html and css, im trying to start my portfolio but I cant figure out how to center my social media icons with my nav bar links, im going to place an image of the what I have written so far to give you an idea. if anyone can help that would be great. sorry for all of my notes in the code, its just for my own reference when going over my work in the beggining.!

and any other general advice if you see anything that I shouldn't have done please feel free to let me know- all advice is very much appreciated!

printscreen of my code

<div >
  <header >Omar Mahmoud</header>
  <ul >
    <li>
    <!-- <li><a href="search"><i ></i><input type="text" placeholder= "  Search..."> -->
    <li><a href="home"><i ></i>  Home</a></li>
    <li><a href="about-me"><i ></i> About Me</a></li>
    <li><a href="what-i-do"><i ></i> What I do</a></li>
    <li><a href="portfolio"><i ></i> Portfolio</a></li>
    <li><a href="contact"><i ></i> Contact</a></li>
  </ul>
</div>
                     <!-- not putting a list tag puts them next to each other instead of below each other-->
<div >
  <a href="github"><i< ></i></a>
  <a href="Linkedin"><i< ></i></a>

CodePudding user response：

First thing I noticed is that you have an opened list tag underneath your < ul > tag.

Is there supposed to be a search bar? One appears if you add alignment:

<ul , style="align-items:center>

If you want your list to be horizontal and on the same row as the search bar, you can use display in css. Make sure to group them as an id or class.

I would also recommend simplifying your class names, and not using spaces.

< em > is also more commonly used than < i >, so I would stick to em.

CodePudding user response：

* { margin: 0; }

.center-items {
 display:flex;
 align-items: center;
 justify-content:center;
 padding: .4rem;
}

i {
padding: .4rem;
}

.main-nav-title {
background-color:blue;
color:white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <div >
      <header >Omar Mahmoud</header>
      <ul >
      
      
        
        <!-- <li><a href="search"><i ></i><input type="text" placeholder= "  Search..."> -->
        <li ><a href="home"><i ></i>  Home</a></li>
        <li ><a href="about-me"><i ></i> About Me</a></li>
        <li ><a href="what-i-do"><i ></i> What I do</a></li>
        <li ><a href="portfolio"><i ></i> Portfolio</a></li>
        <li ><a href="contact"><i ></i> Contact</a></li>
      </ul>
    </div>
                         <!-- not putting a list tag puts them next to each other instead of below each other-->
    <div >
          <a href="github"><i ></i></a>
   
 
          <a href="Linkedin"><i ></i></a> 
    </div>

You need to learn some CSS, MDN is good resource to do that. Happy hacking!