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 create custom CSS “on the fly” based on account settings in a Django site?

    How to create an interactive circular links using CSS [closed]

    Polymer 1.x: How to imperatively (using JS) obtain the value of a custom CSS property?

    How to make a webpage display dynamic data in real time using Python?

    How do I create page transitions for my website

    How To Vertically Align Text On A Squarespace Button?

    How to Convert SASS on the fly to CSS in Python?

    How do you choose when to use DIV and when SPAN, to wrap something?

    How to apply css to iframe content? [closed]

    How to check if svg element supports css transform

    How to adjust 100% height to include height of added element

    How to modify twitter widget in css

    With css, how to ensure wrap on span boundary?

    how to insert css into html for blogger gadget

    Text-only CSS slideshow

    How to style a selected radio button AND include space as clickable?

    How to get a background image to print using css?

    How to insert background image on HTML Tag using css?

    How can I remove “border-top-width” css style?

    Rails 4: How to style navigation for current page using jQuery

    How to prevent PHP pushed HTML tables exceeding the length of the page

    How do I position a div under a fixed position div

    How do I achieve a fully working image scrolling effect like in this example?

    CSS - how to style rounded area with a gradient background?

    How can I track down a:hover jquery source?

    How to access the set qt stylesheet properties (css like grammar), or is there an css to xml converter?

    How to add HTML/CSS using the editor on DNN? How to add markup without relying on modules?

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    How: have more than one CSS sprite on a page

    How do I select an element in the dom with an attribute of ct:value?