Solution 1 :

It looks like you’re using Bootstrap, in which case you should change

<div class="container">


<div class="container-fluid">

because the container class has a fixed width, but container-fluid is full width. This should remove any extra padding/margin that your page has.

Solution 2 :

  1. Try doing a CSS “reset”:
* {margin: 0;}

This will get rid of margins everywhere. If you need a margin somewhere in the future, you can set it on that specific element.

  1. Try setting width: 100% on that element that you’re seeing margins on.

MetropolisCZ’s point on using the Dev Tools is also excellent advice.

Solution 3 :

Add a reset style to your code:

* { 
     margin: 0;
     padding: 0;
     box-sizing: border-box; 

Problem :

I a beginner with Stack Overflow, with HTML and CSS. Sorry if does not look like to a standard question.

I am trying to build a website. I see that I have two margins (one on the left side and another one on the right side of the screen). I would like to have no margin. What is wrong in my code?

Enter image description here

My CSS code is

    /* Center contents */
    margin-left: 0;
    margin-right: 0;
    text-align: center;

    max-width: 600px;
    margin: auto;

main .form-control
    /* Center form controls */
    display: inline-block;

    /* Override Bootstrap's 100% width for form controls */
    width: auto;

    /* Scroll horizontally as needed */
    overflow-x: auto;

    /* Center contents */
    text-align: center;

main td
    /* Left-align the tables' cells */
    text-align: left;

I added the HTML code as well.

<!DOCTYPE html>

<html lang="en">

        <!-- -->
        <meta charset="utf-8"/>
        <meta content="initial-scale=1, width=device-width" name="viewport"/>

        <title>My Finance: {% block title %}{% endblock %}</title>

        <div class="container">

            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        <a class="navbar-brand" href="{{ url_for('index') }}"><span class="blue">My</span><span class="red">Finance</span></a>
                    <div class="collapse navbar-collapse" id="navbar">
                        {% if session.user_id %}
                            <ul class="nav navbar-nav">
                                <li><a href="{{ url_for('quote') }}">Quote</a></li>
                                <li><a href="{{ url_for('buy') }}">Buy</a></li>
                                <li><a href="{{ url_for('sell') }}">Sell</a></li>
                                <li><a href="{{ url_for('history') }}">History</a></li>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="{{ url_for('logout') }}">Log Out</a></li>
                        {% else %}
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="{{ url_for('register') }}">Register</a></li>
                                <li><a href="{{ url_for('login') }}">Log In</a></li>
                        {% endif %}

            {% if get_flashed_messages() %}
                    <div class="alert alert-info" role="alert">
                        {{ get_flashed_messages() | join(" ") }}
            {% endif %}

                {% block main %}{% endblock %}



Comment posted by MetropolisCZ

Best way will be to inspect element with browser tools. Otherwise please add HTML too.

Comment posted by Lakshan Costa

add the html code too

Comment posted by How to Ask

Please read

Comment posted by minimal reproducible example

Without HTML or a

Comment posted by phuzi

If you are using Bootstrap try changing

Comment posted by Nassim

Hi, I tried your proposition but the issue is still the same.

Comment posted by Quentin

That’s a horrible sledgehammer approach, and one I don’t think will work here given the rest of the CSS provided

Comment posted by Nassim

I tried your proposition but the issue is still the same.