[ANSWERED] html – How do I change a padding of a navigation element?

Question 1

your problem is that tag ul has rule padding-inline-start: 40px by default. And that rule needs to be overridden. Add this to your css, and your problem will be solved:

.navigationwrap {
  padding-inline-start: 0;
}

And do padding: 15px for li a:

li a {
    text-decoration: none;
    color: gray;
    padding: 15px;
    border-radius: 5px solid black;
}

Also, remove padding: 15px from .Desktop:

.Desktop {
   background: gray; 
   color: white; 
}

If you have any questions, let me know about them.

li  {
    display: inline;
    
}

li a {
    text-decoration: none;
    color: gray;
    padding: 15px;
    border-radius: 5px solid black;
}

.Desktop {
   background: gray; 
   color: white;
}

.navigation {
    background: white;
    padding: 5px;
}

.text {
    margin-left: 85px;
    border: 2px solid black;
    display: inline-block;
}

body {
    background: gray;
}

.navigationwrap {
  padding-inline-start: 0;
}

<!DOCTYPE html>
<html>
    <head>
        <title>KONECNE</title>
        <link rel="stylesheet" href="CSS/styles.css">
        <link rel="stylesheet" href="CSS/normalize.css">
    </head>
<body>
    <header id="header" class="hlavicka">
        <nav id="nav" class="navigacka">
            <div class="navigation">
                <div class="text">
                    <ul class="navigationwrap">
                        <li><a href=# class="Desktop">Desktop</a></li>
                        <li><a href=# class="Tablet">Tablet</a></li>
                        <li><a href=# class="TabletP">Tablet(Potrait)</a></li>
                        <li><a href=# class="Mobile">Mobile</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <section id="header" class="wrapper">
        <nav class="podnavigacka">

        </nav>
    </section>

    <section class="hlavnytext">

    </section>

</body>
</html>

Question 2

li  {
    display: inline;
    
}

li a {
    text-decoration: none;
    color: gray;
    padding-left: 15px;
    border-radius: 5px solid black;
}

.Desktop {
   background: gray; 
   color: white;
   padding: 15px;
   
}

.navigation {
    background: white;
    padding: 5px;
}

.text {
    margin-left: 85px;
    border: 2px solid black;
    display: inline-block;
}

.Mobile{
    padding: 20px;
}

body {
    background: gray;
}

<!DOCTYPE html>
<html>
    <head>
        <title>KONECNE</title>
        <link rel="stylesheet" href="CSS/styles.css">
        <link rel="stylesheet" href="CSS/normalize.css">
    </head>
<body>
    <header id="header" class="hlavicka">
        <nav id="nav" class="navigacka">
            <div class="navigation">
                <div class="text">
                    <ul class="navigationwrap">
                        <li><a href=# class="Desktop">Desktop</a></li>
                        <li><a href=# class="Tablet">Tablet</a></li>
                        <li><a href=# class="TabletP">Tablet(Potrait)</a></li>
                        <li><a href=# class="Mobile">Mobile</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <section id="header" class="wrapper">
        <nav class="podnavigacka">

        </nav>
    </section>

    <section class="hlavnytext">

    </section>

</body>
</html>

Question 3

I am pretty much a newbie to HTML/CSS. I’ve created a navigation, but the navigation has this white space at the start of it, next to “Desktop” and no space at the end of it (next to “Mobile”), any way I can change the size of it? I hope you understand what I mean

li  {
    display: inline;
    
}

li a {
    text-decoration: none;
    color: gray;
    padding-left: 15px;
    border-radius: 5px solid black;
}

.Desktop {
   background: gray; 
   color: white;
   padding: 15px;
   
}

.navigation {
    background: white;
    padding: 5px;
}

.text {
    margin-left: 85px;
    border: 2px solid black;
    display: inline-block;
}

body {
    background: gray;
}

<!DOCTYPE html>
<html>
    <head>
        <title>KONECNE</title>
        <link rel="stylesheet" href="CSS/styles.css">
        <link rel="stylesheet" href="CSS/normalize.css">
    </head>
<body>
    <header id="header" class="hlavicka">
        <nav id="nav" class="navigacka">
            <div class="navigation">
                <div class="text">
                    <ul class="navigationwrap">
                        <li><a href=# class="Desktop">Desktop</a></li>
                        <li><a href=# class="Tablet">Tablet</a></li>
                        <li><a href=# class="TabletP">Tablet(Potrait)</a></li>
                        <li><a href=# class="Mobile">Mobile</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <section id="header" class="wrapper">
        <nav class="podnavigacka">

        </nav>
    </section>

    <section class="hlavnytext">

    </section>

</body>
</html>

Thanks in advance

Bollate

[ANSWERED] html – How do I change a padding of a navigation element?

By

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by khushi

Comment posted by s.kuznetsov

Comment posted by Mitrixsen

Comment posted by khushi

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate