How to remove flexbox default padding/margin/pagemargin?


Tags: javascript,html,css,flexbox

Problem :

I'm currently starting up my senior thesis website (starting from scratch). I'm using flexbox as a structure of the html however I was wondering how to remove the default margin or page of the flexbox?

HTML Body

<header>
    <section>
        <!--Start of Logo-->
        <div class="logo_section">People Tracking System</div>
        <!--End of Logo-->

        <!--Start of Time-->
        <div class="time_section">
            <br><br>
            <div id = "time" ></div>
            UCT+8
        </div>
        <!--End of Time-->

        <!--Start of Login Form-->
        <div class="login_section">
            <form action="login.php" class = "container" method="POST">
                <div class="container">     
                    <label>login: </label> &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input id = "inputform" type="text" placeholder="Enter Username" name="uname" required>
                    <br>
                    <label style="text-align:right">password: </label>&nbsp;
                    <input id = "inputform" type="password" placeholder="Enter Password" name="psw" required>
                    <br>
                    <input type="checkbox" checked="checked"> Remember me
                    <button type="submit" id ="submit">Login</button>
                </div>
            </form>
        </div>
        <!--end of login form-->
    </section>
</header>

CSS Code

section {
    display: -webkit-flex;
    display: flex;

    -webkit-flex-direction: row;
    flex-direction: row;

    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin:0;
}

/*Logo Section*/
.logo_section {
    flex: 1 1 10%;
    order: 1;
}

/*time*/
.time_section {
    background: #143c70;
    flex: 3 1 60%;
    order: 2;
    text-align:right;
    color: white;
}

/*login form*/
.login_section {
    background-color: #7098cc;
    clear: none;
    flex: 1 6 15%;
    order: 3;
}

https://jsfiddle.net/laklaker/qyghLof4/

I hope you can help me regarding this problem. Thanks!



Solution :

I think this might be happening in the jsfiddle. If it is still happening in your page you can have:

body {
    margin: 0;
}

    CSS Howto..

    How to adjust progress bar with Jquery?

    What's the best way to show (un/ordered) HTML lists as a top-down tree?

    How to align the wizard to the left and right sides?

    Showing the percentage of poll's progress bar outside progress bar

    How to make a Check Button? (hidden checkbox with label as a button: CSS only)

    How to get background colors with fullCalendar and Bootstrap

    How to get html data-attribute value in css regular expressions

    How to make child span collapse with parent

    how to make target link work giving different css properities

    How could I use the html a tag to change div width and height?

    How can I get the seletced filename from file button?

    How to remove line break after DIV in CSS

    How do I provide navigation options on the sides of a centered logo?

    how can I make my navbar scroll smoothly to the top on page click

    How can I remove dependancies that are non existent or not being called on by any document?

    How would I achieve this CSS effect (centering content and padding)?

    Woocommerce CSS - How do I address Payment Methods, so I can tweak/CSS it

    Hide/Show menu with increase/decrease of width

    How to click CSS with a space using Selenium Webdriver

    How do I use CSS in Django?

    How to make onmouseover on menu link change background image?

    How to center a Dijit Select widget?

    How can override a CSS class to that nothing get applied?

    How to create a CSS style which override another CSS style

    How do you resize a container between two others?

    How can I conform to a 4 nest rule?

    How can I prevent my li's from going below my menu even if there is no room?

    How to dim an image keeping transparency untouched with CSS or JS?

    How to Make Button Tag Only Show Image Inside of it

    How can I create this simple form example in HTML?