Solution 1 :

You have a few things going on here but first I will explain the width and what 100% means. The width of an item is naturally the width of the content. When you set the width to 100%, that means it will be 100% of its parent container. Since you don’t have a static width applied to the nav or body, it will default to the screen width.

A ul is a block element. The reason that your header is overlapping though is due to setting position of the ‘nav’ to absolute. Changing an element to having an absolute position removes the element from the page’s natural flow. This means that the ul will be positioned in the same location at the top of its parent element because it is the first relatively positioned element inside.

If you remove the absolute positioning from the h3 and set the ul’s width to 100%, then I think that you will achieve the look that you are going for.

Solution 2 :

… block elements so they will automatically inherit the width of the parent

“inherit” is not the right term here. “consume” would be better. It’s only true of its content area when its margins, paddings and borders sum to zero width, but that would be the case for your ul element if it wasn’t for the fact that your ul element is a flex item.

Flex items are not block level elements and therefore the rule about automatically consuming the width of the parent by default does not apply. Since the ul element is the only non-absolute positioned item on the main axis, you can make it consume the width of the parent either by (a) making it 100% width as you have done, (b) by setting flex-basis to 100%, or (c) by setting flex-grow to a value greater than or equal to 1.

Problem :

I want to right-align my navigation links for my resume, courses and contact. and I’ve heard that the ul elements are block elements so they will automatically inherit the width of the parent(navigation element). However, if I added width:100% to my “right” class,the webpage is different from if I don’t add wid:100%. That’s why I’m confused on what’s width:100% means and how it works. I’ve searched everywhere and no great help.
Thank you for the answers!

    margin: 0;
    padding: 0;
    background-color: white;
    font-family: sans-serif;
    list-style-type: none;
    margin: 0;
    font-weight: 900px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;

    font-family: Helvetica, Arial, Sans-Serif;
    font-weight: 900;
    text-align: center;
    padding-top: 25px;
    position: absolute;

    text-align: right;
    text-align: left;


nav ul li {
    display: inline-block;
    font-size: 20px;
    pointer-events:auto ;
li a{
    color:rgb(233, 227, 227);

<!DOCTYPE html>
    <title> Mingtao Sun's Personal Website </title>
    <link rel="stylesheet" type="text/css" href="style.css">
        <h3 class="name">Mingtao Sun</h3>
        <ul class="right"> 
            <li><a href="#Resume">Resume </a></li>
            <li><a href="#Courses">Courses</a></li>
            <li><a href="#Contact">Contact</a></li>
    <div class="Introduction">
        <img id="tommy" src="">
        <span class="name"> Mingtao Sun </span>


Comment posted by Temani Afif

your ul is a flex item in addition of being a block level element

Comment posted by TommySun

@TemaniAfif Why is that? I didn’t change default. Thanks!

Comment posted by Quentin

@TommySun — Yes, you did. You set

Comment posted by Obsidian Age

The parent

Comment posted by flex-level boxes, and not block-level boxes at all

@TemaniAfif – Point of pedantry: flex items are

Comment posted by Slipoch

width 100% on Safari (at least slightly older versions) will actually use 100% of the display width instead of the window width.

Comment posted by Emmy

@Slipoch You are right, I should have put display width instead of screen width.

Comment posted by Slipoch

Well it’s window width on everything except safari.