Why is the link going to the side of my screen, if my max-screen size is 100%?-CodePudding

So I'm making a website with HTML & CSS, and I want to have 2 navigation bars (1 for the Register and Log In for e.g.) and the other one for "Home", "Projects", "Partners", etc., so I've done:

@charset "utf-8";
/* CSS Document */

* {
    font-family: 'Shippori Antique B1', sans-serif;
}

html, body {
    max-width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    transition: .3s;
    color: #fff;
}

a:hover {
    transition: .3s;
    text-decoration: underline;
}

.navigation {
    color: #fff;
    background: #006CFF;
    padding: 10px;
}

.top-navigation {
    text-align: right;
    width: 100%;
    padding: 15px;
    background: #0084FF;
}

<!doctype html>
<html>
    
<head>
<meta charset="utf-8">
<title>Website</title>
<script src="https://kit.fontawesome.com/a3f36ff0b4.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shippori Antique B1&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" type="image/png" href="images/logo.png"/>
</head>
<body>
    
    <div class="top-navigation">
        
            <a href="register.html">Register</a>
      <a href="register.html">Log In</a>
            
        </div>
    
    <div class="navigation">
    
        
        
    </div>
    
</body>

</html>

And for some reason my div class "top-navigation" 'Log In' link goes off the screen, now I know I can fix that just by adding "float: right;" to the CSS part of "top-navigation", but then for some reason, the main "navigation" div class will disappear.

Anyone can assist me with this issue?

CodePudding user response：

Just remove width: 100%; from .top-navigation and your items will show up as you intended.

.top-navigation {
    text-align: right; 
    padding: 15px;
    background: #0084FF;
}

CodePudding user response：

For some reason the padding is pushing the content out, I removed the padding it worked.

I tried to remove the 100% and it worked too!

* {
    font-family: 'Shippori Antique B1', sans-serif;
}

html, body {
    max-width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    transition: .3s;
    color: #fff;
}

a:hover {
    transition: .3s;
    text-decoration: underline;
}

.navigation {
    color: #fff;
    background: #006CFF;
    padding: 10px;
}

.top-navigation {
    text-align: right;
    padding: 15px;
    background: #0084FF;
}

CodePudding user response：

Add box-sizing: border-box; to that element to include the padding in the 100% width

@charset "utf-8";
/* CSS Document */

* {
    font-family: 'Shippori Antique B1', sans-serif;
}

html, body {
    max-width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    transition: .3s;
    color: #fff;
}

a:hover {
    transition: .3s;
    text-decoration: underline;
}

.navigation {
    color: #fff;
    background: #006CFF;
    padding: 10px;
}

.top-navigation {
    text-align: right;
    width: 100%;
    padding: 15px;
    background: #0084FF;
    box-sizing: border-box;
}

<!doctype html>
<html>
    
<head>
<meta charset="utf-8">
<title>Website</title>
<script src="https://kit.fontawesome.com/a3f36ff0b4.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shippori Antique B1&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="shortcut icon" type="image/png" href="images/logo.png"/>
</head>
<body>
    
    <div class="top-navigation">
        
            <a href="register.html">Register</a>
      <a href="register.html">Log In</a>
            
        </div>
    
    <div class="navigation">
    
        
        
    </div>
    
</body>

</html>