The container refuses to show the padding

I'm facing an issue with my .container where the padding is not displaying correctly. I've tried various methods but the padding just won't work as expected.

CSS:

nav{
    border-style: solid;
    border-color: green;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    height: 70vh;
}

ul{
    padding:0px;
    list-style-type:none;
}

.container{
    border-top: solid;
    border-right: solid;
    border-bottom: solid;
    border-color: green;
    padding-left: 10px;
    width: 97vw;
    height: 70vh;
}

HTML:

<article>
<nav>
<ul style="list-style-type:none;">
<li><strike>home</strike></li>
<li><a href="portfolio.php">portfolio</a></li>
<li><a href="portfolio.php">dsdfsdfs</a></li>
</ul>
</nav>
<div class="container"></div>
</article>

Regardless of what value I assign to the padding-left property, the padding always stays the same.

Answer №1

Link to Fiddle

Updated CSS Styles:

nav{
    border-style: solid;
    border-color: green;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    height: 70vh;
}

ul{
    padding:0px;
    list-style-type:none;
}

.container{
    border-top: solid;
    border-right: solid;
    border-bottom: solid;
    border-color: green;
    padding-left: 10px;
    width: 75vw;
    height: 70vh;
    display: inline-block;
    float: left;
    margin: 0px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ensuring that the brief description on my thumbnail is consistently centered

I am facing an issue with aligning text consistently in the middle of thumbnails on my website. Regardless of whether the text spans 1, 2, or 3 lines, I want it to always be positioned inline with the center of the thumbnail. I have tried various methods s ...

Is there a way to set an image as the background of my HTML screen?

{% extends "layout.html" %} {% block app_content %} <div> {% from "_formhelpers.html" import render_field %} <form method="post" enctype="multipart/form-data"> <div class = "container"> < ...

Seamless transition of lightbox fading in and out

Looking to create a smooth fade in and out effect for my lightbox using CSS and a bit of JavaScript. I've managed to achieve the fading in part, but now I'm wondering how to make it fade out as well. Here is the CSS code: @-webkit-keyframes Fad ...

Using a hashtag in the URL to open an HTML <div> element

I have a website with two tabs labeled as Home and Action. When I hover over the Action tab, the URL changes to include #tab_action: https://i.sstatic.net/OOD5S.png Then, when I click on it, the related tab content opens: https://i.sstatic.net/JdcGG.pn ...

Building CSS columns

Similar Inquiry: Creating dual columns in HTML/CSS layout I'm exploring ways to achieve a two-column layout within a wrapping div element. Currently, I have the following CSS code snippet which centers a div inside the browser: .wrapper {width: ...

Creating responsive designs for high resolution screens using media queries in HTML

I'm curious about how to implement media queries for high-resolution screens such as 4k, 5k, and retina displays. I've been researching this topic and have found that resolution-specific media queries can be used. However, I am unsure of how to d ...

Adapt appearance according to the length of the text

Currently, I have an array that stores multiple strings based on displayed charts. My objective is to find the longest string within this array. So far, this task has been executed without any issues. The code snippet for this process is as follows: var ...

Having trouble with CSS Overflow:hidden not functioning properly on my slider

I have successfully created a 100% width slide using jQuery. However, I am facing an issue where the horizontal overflow is not being hidden. Here are my codes: HTML, <div class="slide"> <ul> <li><img src="inc/imj/slide/1 ...

Unable to modify the hover color on the image or icon

After creating a circle icon with an image in the center, I wanted to make the image change colors on hover. The main focus of the icon is the circle itself. In my attempt to achieve this effect, I included the following code for the circle icon: .circle- ...

react native ScrollView items with uniform padding at the top and bottom

I'm currently working on a scroll component that resembles a gallery of images. My goal is to center the images based on the device height with equal padding on both the top and bottom. However, I'm facing an issue where the top padding does not ...

display a loading spinner for number input fields in HTML5

In my HTML5 project, I am currently utilizing a numeric control (input type="number"). The default behavior displays the spinner (up and down arrows) only on hover. Is there a way to make the spinner permanently visible using CSS or another method? ...

Spinning an SVG path with CSS3 in a circular motion from its central axis

I have a collection of SVG paths, and one of them is displayed below: <path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36. ...

How can I ensure that the Hamburger menu fully covers the entire viewport when it is open?

My hamburger menu is fully functional using CSS alone. However, when the menu opens, it doesn't fill the entire screen as I would like. Currently, my page content appears below the open menu, creating a cluttered look. https://i.sstatic.net/EtTsr.png ...

Ensure that a tiny image measuring 1*1 pixel just before the closing </body> tag does not generate unwanted margin

Take a look at this demonstration Even though I have set the <body> to have no margins whatsoever, a 1*1 image at the bottom of the page is causing a significant margin. Adding or removing the current CSS reset does not resolve the issue. What cou ...

Unable to conceal HTML5 video in mobile devices through media query

I've been struggling to find a solution for hiding a video on mobile devices. Despite going through numerous posts and attempting different methods, I haven't been successful in using @media queries to hide the video and show an image instead. He ...

Setting the position of a tooltip relative to an element using CSS/JS

I'm struggling to make something work and would appreciate your help. I have a nested list of items that includes simple hrefs as well as links that should trigger a copy-to-clipboard function and display a success message in a span element afterwards ...

Tips for Aligning Pagination at the Center in jQuery Bootstrap DataTables Extension

I am currently utilizing jQuery's DataTables plugin in conjunction with Bootstrap 3.1 to facilitate sorting and paginating server-side content. This is the current appearance of my table: http://datatables.net/manual/styling/bootstrap-simple.html W ...

What is the most common method for creating a dropdown menu for a website's navigation?

Is there a common approach to creating an interactive drop-down navigation menu in the industry? I have searched on Google and found multiple methods, but as a student working on my first big web project, I am hoping to find a standard practice. I don&apo ...

Is there a way to effectively utilize Twitter Bootstrap classes such as "row" and "span(X)" specifically for @media print?

Currently, I am facing the challenge of printing web pages on my website and I am seeking advice on how to effectively utilize the row and spanX Bootstrap classes to better manage the content displayed on the printed page. For instance: <div class= ...

JavaScript code for opening and closing buttons

I created a button that successfully opens, but I am struggling to figure out how to close it. Can someone assist me with this? Additionally, I have one more query: How can I remove the border when the button is clicked? document.getElementById("arrowb ...