How To Align Header With Wrapper In Html and Css

admin_img Posted By Bajarangi soft , Posted On 12-10-2020

An HTML wrapper permits you to center header, content, and footer inside a webpage. Headers could be very fancy. Using CSS or bootstrap in a creative way can give you with a sidebar, or two-column look to your active website pages.

Align Header

1.How To Align Header With Wrapper In Html and Css
Syntax:

<div class="wrapper">
    content...
</div>
Example: HTML Code
<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to align header with
        wrapper in Bootstrap?
    </title>

    <style type="text/css">
        .wrapper {
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
<div class="wrapper">
    <h1 style="color: #d52b26">
     bajarangi soft
    </h1>
    Piece of text inside a 500px
    width div centered on the page
</div>
</body>

</html>

How this works: Create a wrapper and assign it a certain width. Apply an automatic horizontal margin to it by using margin: auto or margin-left: auto or margin-right: auto property. Make sure your content will be centered.

There are three methods to align header with wrapper that are discussed below:
Method 1: Align header with the wrapper in CSS.
Example: HTML Code

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        Bootstrap 4 Align Header
        with Wrapper
    </title>

    <style type="text/css">

        /* Fit the body to the
        edges of the screen */
        body {
            margin: 0;
            padding: 0;
        }

        nav {
            width: 100%;
            background: lightgreen;
            font-size: 1.1rem !important;
            font-weight: bold;
            text-transform: uppercase !important;
            color: black !important;
            font-family: tahoma;
            padding: 0;
            margin: 0;
        }

        /* The centered wrapper, all other
        content divs will go interior
        and this will never surpass the
        width of 960px. */
        .wrapper {
            width: 960px;
            max-width: 100%;
            margin: 0 auto;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        li {
            float: right;
        }

        li a {
            display: block;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
    </style>
</head>

<body>
<header>
    <nav>
        <div class="wrapper">
            <ul>
                <li><a href="#contact">
                    Contact
                </a></li>

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

                <li><a class="active"
                       href="#home">Home
                </a></li>
            </ul>
        </div>
    </nav>
</header>

<center>
    <h1 style="color: #e7b126">
       bajarangi soft
    </h1>
</center>
</body>

</html>

Related Post