It looks like you’re using Bootstrap, in which case you should change
<div class="container">
to
<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.
* {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.
width: 100% on that element that you’re seeing margins on.MetropolisCZ’s point on using the Dev Tools is also excellent advice.
Add a reset style to your code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
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?
My CSS code is
.container
{
/* Center contents */
margin-left: 0;
margin-right: 0;
text-align: center;
}
.table
{
max-width: 600px;
margin: auto;
}
main .form-control
{
/* Center form controls */
display: inline-block;
/* Override Bootstrap's 100% width for form controls */
width: auto;
}
main
{
/* 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">
<head>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
<meta charset="utf-8"/>
<meta content="initial-scale=1, width=device-width" name="viewport"/>
<title>My Finance: {% block title %}{% endblock %}</title>
</head>
<body>
<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>
</button>
<a class="navbar-brand" href="{{ url_for('index') }}"><span class="blue">My</span><span class="red">Finance</span></a>
</div>
<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>
<ul class="nav navbar-nav navbar-right">
<li><a href="{{ url_for('logout') }}">Log Out</a></li>
</ul>
{% 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>
</ul>
{% endif %}
</div>
</div>
</nav>
{% if get_flashed_messages() %}
<header>
<div class="alert alert-info" role="alert">
{{ get_flashed_messages() | join(" ") }}
</div>
</header>
{% endif %}
<main>
{% block main %}{% endblock %}
</main>
</div>
</body>
</html>
Best way will be to inspect element with browser tools. Otherwise please add HTML too.
add the html code too
Please read
Without HTML or a
If you are using Bootstrap try changing
Hi, I tried your proposition but the issue is still the same.
That’s a horrible sledgehammer approach, and one I don’t think will work here given the rest of the CSS provided
I tried your proposition but the issue is still the same.