Assignment – Flexbox

Radu_Baroncea · January 24, 2022, 5:30pm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web layout</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header>
        <h1>Logo</h1>
        <nav>
            <ul class="list">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a> </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Article heading</h2>
            <section>
                <p>Lorem ipsum dolor sit amet.</p>
            </section>
            <aside>
               <p> By the way...</p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
    <p>Copyright &copy; 2022</p>  
    </footer>
</body>
</html>

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: whitesmoke;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 30px;
}

.list {
    list-style-type: none;
    display: flex;
}

.list li {
    margin: 0 10px;
}

li a {
   text-decoration: none;
}

MauricioNoriega · January 24, 2022, 9:16pm

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Layout</title>
    <link rel="stylesheet" href="./CSS/styles-layout.css">
</head>
<body>
    <div class="header">
        
    </div>
    <header>
        <h1 class="logo">Logo</h1>
        <nav>
            <ul class="menu">
                <li class="menu-options"><a href="#">Home</a></li>
                <li class="menu-options"><a href="#">About</a></li>
                <li class="menu-options"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Article Title</h2>
            <p>Lorem ipsum dolor sit amet.</p>

        </article>
    </main>
    <aside>
        here are banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy</p>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

CSS code:

header {  
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    border: 5px solid lightsalmon;
    width: -webkit-fill-available;
    padding: 10px;

}
.logo {
    
    font-family: fantasy;
    color: lightsalmon;
    margin: 25px;
}
ul.menu {
    display: flex;
    list-style-type: none;

}
.menu-options {
    text-decoration: none;
    color: lightsalmon;
    font-family: fantasy;
    margin: 25px;
    font-size: 20px;
}

I tried styling a bit the header, but for some reason, the text decoration and color did not work for the menu options specifically. Can someone help me find out why?

thecil · January 25, 2022, 2:45pm

Nice solution sir!

The error with the class for menu-option was just in the tag you use to assign the class, instead of assign it to li, try with the hyperlink a.

Carlos Z

MauricioNoriega · January 25, 2022, 7:08pm

Thanks! All solved now

RonJambo · January 27, 2022, 12:12pm

Here´s the HTML code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./css/styles.css">

    <title>Web Layout</title>

</head>

<body>

    <header>

        <h1>Logo</h1>

        <br>

        <nav>

            <ul>

                <li><a href="#">Home</a</li>

                <li><a href="#">About</a></li>

                <li><a href="#">Contact</a></li>

            </ul>

        </nav>

    </header>

    <main>

        <article>

            <br><h2>Article heading</h2></br>

            <section>

                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa labore dolor vitae est tempore voluptate?</p>

                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa labore dolor vitae est tempore voluptate?</p>

                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa labore dolor vitae est tempore voluptate?</p>

                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa labore dolor vitae est tempore voluptate?</p>

            </section>

        </article>

        <br>

        <aside>

            Here be banners and ads...

        </aside>

    </br>

    </main>

    <br>

    <footer>

   <p> Copyright &copy; 2022 RonJambo</p>

   </footer>

    </body>

</html>

And here is the CSS code:

html * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(243, 238, 219)
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 15px;
}

header nav ul {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

header nav ul li {
    margin: 0 10px;
}

h1, li {
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    font-weight: strong;
    color: rgb(156, 147, 152);
}

li a {
    text-decoration: none;
    color: rgb(156, 147, 152);
    font-size: 24px;
}

zsolt-nagy · January 29, 2022, 6:36pm

Add a class to your html elements and put the styles in a css file.

Anoushka · January 29, 2022, 7:18pm

Right after I posted my screenshot solution here, I realized I should have added a class and put all styles in css But at the moment I was just so happy that it was all working, that I completely forgot about that important part…

Resonance · January 31, 2022, 11:35pm

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style2.css">
</head>
<body>
    <header class="header-container">
        <h1 class="logo-container">Logo</h1>
        <nav class="nav-container">
            <ul class="menu-list">
                <li class="menu-item"><a href="#">Home</a></li>
                <li class="menu-item"><a href="#">About</a></li>
                <li class="menu-item"><a href="#">Contact</a></li>
<!--Research Skip Links-->
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <section></section>
            <h2>Article Heading</h2>
            <section>
                <p>Lorem <span>ipsum</span> dolor sit amet.</p>
            </section>
            <aside>
                <p>By the way...</p>
            </aside>
        </article>
<!--article is awalys in context and can be copied to another website, whereas a section does not have context-->
    </main>
    <aside>
        Here banner and ads
    </aside>
    <footer>
        <p>Copyright &copy; 2021 Yo Mamma</p>
        <br>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: beige;
    }

    .header-container{
        display: flex;
    }

    .logo-container{
        width: 30%;
        padding: 25px;
    }

    .nav-container{
        width: 70%;
        padding: 25px;
    }

    .menu-list {
        list-style-type: none;
        display: flex;
        justify-content: flex-end;
    }

    .menu-item {
        margin: 15px;
        font-weight: bold;
    }

#moralis-reference {
    text-shadow: 2px 2px 7px darkgray;
}

.dashed-border {
    border: 2px dashed darkblue;
}

.column-container {
    display: flex;
}

.column {
    width: 40%;
}

button {
    border: none;
    box-shadow: 3px 3px 7px rgba(90, 90, 90, 0.6);
    cursor: pointer;
}
[type=text], [type=number], [type=submit] {
    padding: 8px;
}

form {
    padding: 15px;
    border: 2px solid black;
    margin: 30px; 

}

[type=text], [type=number],[type=submit] {
    padding: 8px
}

Kris_O_Shea · February 1, 2022, 3:25pm

Html Part:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Layout</title>
    <link rel="stylesheet" href="./page_layout.css">
</head>
<body>
    <header class="header-container">
        <h1 class="logo">Logo</h1>
        <nav class="main-nav">
            <ul class="menu">
                <li class="menu-items"><a href="#">Home</a></li>
                <li class="menu-items"><a href="#">About</a></li>
                <li class="menu-items"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section></section>
        <article>
            <h2>Article Heading</h2>
            <section>
                <p>Lorem <span>ipsum</span> dolor sit amet consectetur, adipisicing elit. Consectetur voluptate inventore dolor in eos aspernatur animi hic quaerat molestiae, cum itaque. Illo impedit dolor nesciunt nostrum delectus? Cupiditate, at ex?</p>
            </section>
            <aside>
                <p>By The way..</p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
        <p>copyright & copy;</p>
    </footer>
    
</body>
</html>

CSS part:

* {
    margin: 40;
    border: 20;
    padding: 60;
    box-sizing: border-box;    
}
body {
    background-color: beige;
}

/* Header styles */

.header-container {
 display: flex;

}

header {
    outline: 6px solid rgba(28,110,164,0.23);
    outline-offset: 0px;
}

.menu {
    list-style-type: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    text-decoration: none;
    padding-right: 30px;
}

.menu-items {
    margin: 20px;
    font-family: "Lucida Console", Monaco, monospace;
font-size: 18px;
letter-spacing: -0.8px;
word-spacing: -0.8px;
color: #000000;
font-weight: bold;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
}


.logo {
    width: 30%;
    height: 50px;
    padding-top: 50px;
    padding-left: 30px;
    font-family: "Lucida Console", Monaco, monospace;
font-size: 22px;
letter-spacing: -0.8px;
word-spacing: -0.8px;
color: #000000;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: uppercase;
}

.main-nav {
    width: 70%;

}

rossthebosspalmer · February 2, 2022, 10:45am

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="page_layout.css">
    <title>Web Layout</title>
</head>
<body>
    <header>
        <div class="header">
        <h1>Logo</h1>
            <div class="navigation">
                <nav>           
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>     
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header> 
    <main>
        <section></section>
        <article>
            <h2>Article Heading</h2>
            <section>
                <p>Lorem <span>ipsum</span> dolor sit amet.</p>
            </section>
            <aside>
                <p>By the way...</p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy; 2021 Bogi</p>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
       </nav>
    </footer>
</body>
</html>

CSS

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

.navigation {

    display: flex;

    flex: 1;

    align-items: flex-end;

    justify-content: flex-end;

}

.navigation ul {

Edward.Web3 · February 5, 2022, 1:02am

HTML

    <header class="header-container">
        <h1 class="logo">Logo</h1>
        <nav class="main-nav">
            <ul class="menu-list">
                <li class="menu-item"><a href="#">Home</a></li>
                <li class="menu-item"><a href="#">About</a></li>
                <li class="menu-item"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: beige; 
}

/* Header Styles */
.header-container {
    display: flex;
}

.logo {
    padding-left: 35px;
    width: 30%;
}

.main-nav {
    width: 70%;
}

.menu-list {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
}

.menu-item {
    margin: 20px;
    font-size: 16px;
}

BarinedumK · February 5, 2022, 7:49pm

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Layout</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header class="header-container">
       <h1 class="logo">Logo</h1> 
       <nav class="main-nav">
           <ul class="menu-list">
               <li class="menu-item"><a href="#">Home</a><li>
               <li class="menu-item"><a href="#">About</a><li>
               <li class="menu-item"><a href="#">Contact</a><li>
           </ul>
       </nav>
    </header>
    <main>
        <section></section>
        <article>
            <h2>Article heading</h2>
            <section>
                <p>Lorem, <span>ipsum</span> dolor sit amet.</p>
            </section>
            <aside>
               <p>by the way... </p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads
    </aside>
    <footer>
        <p>Copyright &copy; 2022 B enterprise</p>
    </footer>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: beige;
}

/* Header styles */
.header-container {
    display: flex;
}

.logo{
    padding-left: 25px;
    width: 30%;
}

.main-nav {
    width: 70%;
}

.menu-list {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
}

.menu-item {
    margin: 20px;
    font-size: 16px;
   
}


#moralis-reference {
    text-shadow: 2px 2px 7px darkgray;
}

.dashed-border {
    border: 2px dashed darkblue; 
}

.column-container {
    display: flex;
}

.column {
    width: 40%; 
}

button {
    border: none;
    box-shadow: 3px 3px 7px rgba(44, 44, 44, 0.6);
    cursor: pointer;
}

form {
    padding: 15px;
    border: 2px solid black;
    margin: 30px;
}

[type=text], [type=number],[type=submit] {
    padding: 8px;
}

JasonV · February 6, 2022, 6:06pm

HTML Section

type or p<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web layout</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header class="header-container">
        <h1 class="logo">Logo</h1>
        <nav class="main-nav">
            <ul class="menu-list">
                <li class="menu-item"><a href="#">Home</a></li>
                <li class="menu-item"><a href="#">About</a></li>
                <li class="menu-item"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>Article heading </h2>
            <section>
            <p>Lorem <span>ipsum</span> dolor sit amet.</p>
            </section>
            <aside>
                <p> By the way... </p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy; 2021 Zsolt Nagy</p>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav> 
    </footer>
</body>
</html>aste code here

CSS Section

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body{
    background-color: beige;
}

/* Header styles */
.header-container{
 display: flex;   
}

.logo {
    padding-left: 25px;
     width: 30%;
}

.main-nav{
    width: 70%;
}

.menu-list {
list-style-type: none;
display:flex;
justify-content: flex-end;
padding-right: 30px;
}

.menu-item {
margin: 20px;
font-size:16px ;

}

#moralis-reference {
    text-shadow: 2px 2px 7px darkgrey
}

.dashed-border {
 border: 2px dashed darkblue ;   
}

.column-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.column {
    width: 40%;
}



button {
    border: none;
    box-shadow: 3px 3px 7px rgb(90, 90, 90, 0.6);
    cursor: pointer;
}

form{
    padding: 20px 130px;
    border: 2px solid black;
    margin: 25px 30px 150px 40px;
}

[type=text], [type=number], [type=submit] {
padding: 8px;
}type or paste code here

bmwil87 · February 8, 2022, 11:53pm

CSS

/* Header styles */

.header-container {
    display: flex;
    

}

.logo {
    width: 30%;
padding-left: 25px;
}

.main-nav {
    width: 70%;

}
.menu-list {
list-style-type: none;
display: flex;
justify-content: flex-end;
padding-right: 30px;

}
.menu-item  {
    margin: 20px;
    font-size: 16px;
text-decoration: none;  
font-weight: bold;

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Layout</title>
    <link rel= "stylesheet" href="CSS/styles.css"
</head>
<body>
    <header class="header-container">
    <h1 class="logo">Logo</h1>
    <nav class="main-nav"> 
    <ul class="menu-list">
        <li class="menu-item"><a href="#"> Home </a></li>

        <li class="menu-item"><a href="#"> About </a></li>

        <li class="menu-item"><a href="#"> Contact </a></li>
    </ul>


</nav>
</header>
<main>
<article>
<h2> Article Heading</h2>
<section>
    <p> Lorem <span>ipsum</span> dolor sit amet.</p>
</section>
<aside>
     <p> by the way...</p>
    </aside>
</article>

</main>   
<aside>
    Banner ads here
</aside> 
<footer>
<p> Copyright &copy; 2021 Ben W</p>

</footer>
</body>
</html>

Heyns · February 10, 2022, 4:45pm

CSS

/* Header styles */
.header-container {
    display: flex;
}

.logo {
    padding-left: 25px;
    width: 30%;
}

.main-nav{
    width: 70%;
}

.menu-list {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
}

.menu-item {
    margin: 20px;
    font-size: 16px;
}```

**HTML**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web layout</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <header class="header-container">
        <h1 class="logo">Logo</h1>
        <nav class="main-nav">
            <ul class="menu-list"> 
                <li class="menu-item"><a href="#">About</a></li>
                <li class="menu-item"><a href="#">Home</a></li>
                <li class="menu-item"><a href="#">Contact</a></li>
            </ul>
        </nav>

Cosmin_Fechet · February 12, 2022, 4:49am

Page layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web layout</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header>
        <h1>Logo</h1>
        <nav>
            <ul style="list-style-type: none;" class="menus">
                <li><a href="#" >Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#" >Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section> </section>
        <article>
            <h2>
                Article heading
            </h2>
            <section>
               <p> Lorem <span>ipsum</span> dolor sit amet.</p>
            </section>
            <aside>
                <p>By the way..</p>
            </aside>
        </article>
    </main>
    <aside>
        Here will be banners and ads..
    </aside>
    <footer>
        <p>Copyright & copy</p>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav><aa href=#></aa>
    </footer>
</body>
</html>

#styles.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 10px;
}

.menus {
    display:flex;
    column-gap: 30px;
}

#moralis-reference{
    text-shadow: 2px 2px 7px darkgray;
}

.dashed-border{
    border: 2px dashed darkblue;
}

.column-container{
    display: flex;
}

.column {
    width: 40%;
}

body {
    background-color: rgb(43, 226, 165);
}

button{
    border: none;
    box-shadow: 3px 3px 7px rgba(247, 12, 12, 0.6);
    cursor: pointer;
}
form {
    padding: 15px;
    border: 2px solid black;
    margin: 30px;
}

[type=text], [type=number],[type=submit]{
padding: 8px;
}

JonBal · February 13, 2022, 1:57am

page_layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/page_styles.css">
</head>
<body>
    <header>
        
        <nav style="display: flex">
            <h1 class="flex-logo"> Logo </h1>
            <ul class="flex-container">
                <li class="list-item-style"><a href="#">Home</a></li>
                <li class="list-item-style"><a href="#">About</a></li>
                <li class="list-item-style"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section></section>
        <article>
            <h2>Article heading</h2>
            <section>
                <p>Lorem <span>ipsum</span> dolor sit</p>
            </section>
            <aside>
                 <p> By the way...</p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy; 2022 Jonathan Ballinger</p>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </footer>
</body>
</html>`

page_styles.css

.flex-logo {
    display: flex;
    width: 70%;
}

.flex-container {
    list-style-type: none;
    display: flex;
    flex-direction: row-reverse;
}

.list-item-style {
    text-indent: 25px;
}

darkmatter · February 13, 2022, 7:22am

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Layout</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="header">
    <header class="myNav">
        <h1>Logo</h1>
        <nav>
            <ul class="myMenu-remove-bullets">
                <li class="menu-items"><a href="#">Home</a></li>
                <li class="menu-items"><a href="#">About</a></li>
                <li class="menu-items"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    </div>
    <main>
        <article>
            <h2>Article Heading</h2>
            <section>
                <p><p>Lorem <span>ipsum</span> dolor sit amet.</p></p>
            </section>
            <aside>
                <p>By the way...</p>
            </aside>
        </article>
    </main>
    <aside>
        Here be banners and ads...
    </aside>
    <footer>
        <p>Copyright &copy;</p>
    </footer>
</body>
</html>`

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#moralis-reference {
    text-shadow: 2px 2px 7px darkgray;
}


.dashed-border{
    border: 2px dashed darkblue;
} 

.column-container {
    display: flex;
}
.column{
    width: 40%;
}

body {
    background-color: beige;
}

/* Header Styles */
.myNav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 15px;
}
.myMenu-remove-bullets {
    list-style-type: none;
    display: flex;
}
.menu-item {
    margin: 20px;
    font-size: 20px;

}
button {
    border: none;
    box-shadow: 3px 3px 7px rgb(200, 200, 200);
}


[Type=text], [type=number], [type=submit] {
    padding: 8px;
}

Maki · February 13, 2022, 5:17pm

You can add some padding to links,
a{ padding: 5px; text-decoration: none; } to have a space between them.

ellieD · February 14, 2022, 5:33pm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <header>
    <h1 class ="logo-display">Logo</h1>
<nav>
    <ul class = "nav">
        
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>

    </ul>
</nav>
</header>           
</body>
</html>



body {

    background-color: rgb(238, 223, 223);

}

header{
border-radius: 10px;
    border: rgb(204, 204, 212) solid 1px;
    display:flex;
    justify-content: space-between;
    background-color: rgb(226, 221, 221);
}

.nav {
    display: flex;
    list-style-type: none;
    margin-top: 24px;
    margin-right: 10px
    
}

.logo-display{

    padding-left: 28px;
    font-size: 24px;
    margin-top: 24px;
    font-size: 24px;
}

li {
    
    margin: 0px 30px;
    color:rgb(20, 19, 19);
    font-size: 24px    
}